Search code examples
c#jqueryautocompletebotframework

Query Auto-Completion in c# bot in bot framework

I want to implement autocomplete in my c# bot which i developed using microsoft bot framework and added into my portal as iframe. is it possible to implement query suggestion or query auto-completion in this bot? i tried this solution also

Auto complete in Bot Framework

but i did not find it helpful for me. can i use jquery auto-completion here ?

https://jqueryui.com/autocomplete/

please help me in this.

Thanks in advance.

Solution

  • can i use jquery auto-completion here ?

    Based on my test, we can attach jQuery Autocomplete widgets to webchat input box. The following sample code is for your reference.

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <style>
        .wc-chatview-panel {
            width: 350px;
            height: 500px;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="mybot" />
</body>
</html>
<script>
    BotChat.App({
        directLine: { secret: "{your_directline_secret}" },
        user: { id: 'You' },
        bot: { id: '{your_bot_id}' },
        resize: 'detect'
    }, document.getElementById("mybot"));

    $(function () {

        var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL"];

        $("input.wc-shellinput").autocomplete({
            source: availableTags
        });

    })
</script>

    Test result:

    enter image description here

    Note: I enter a, it show a list items for my selecting, and then I select an item, such as ActionScript, if I directly click send button, it will only send a to bot. To avoid it, we can manually enter a white-space (or other characters) and remove them before click send button.