0

I am trying to implement auto suggestions in chatbot using BotChat & jquery and store multiple values in a single key using an array. how to keep multiple auto suggestions in a single row. when I enter the hi(text field) it gives the multiple suggestion and click on suggestion it will auto complete it , It should be like Google suggestion.

Issue1: My code work only for single key with single value. Issue2: if i click on suggestion it comes into the text box and when i am giving space only the message will go.

code:

<body>
   <div id="bot"></div>
   <script>

        BotChat.App({
            directLine: { secret: "key" },
            user: { id: 'You' },
            bot: { id: '{}' },
            resize: 'detect'
        }, document.getElementById("bot"));

        var availableTags = {"hi": ["Hi","hiring","hello","hey"],"good": ["good","good bye","alright"], "country": ["U.S.A","UAE","Japan"]};

        $(".wc-shellinput").on("keyup", function search(e) {
        var value= e.keyCode;
        console.log(value);
        if (parseInt(value) === 13 || parseInt(value) === 32 )
        {
        }
        else{
            $(".wc-message-groups table").remove();
            }
        let h = '';
        var value=$('.wc-shellinput').val();
        var reg='';
        var realvalue='';     
        reg = new RegExp(value,'g');
        for(x in availableTags) {
        if(value.match(x))
                {
                  h = `<tr><td>${availableTags[x]}</td> </tr>`;         
                  realvalue = $('.wc-message-groups').append(`<p class="adfg"><table><tr><td>${h}</td></tr></table></p>`); 
                }
         }});

        $(".wc-message-groups").on("click", "td", function() {
        $('.wc-shellinput').val($(this).text());
         });
   </script>
</body>

css code:

<style>
      .wc-chatview-panel {
        width: 350px;
        height: 500px;
        position: relative;
                        }
        .adfg{ }
        td{
        font-size: 1em;
        display: inline-block;
        padding: 0 10px;
        height: 26px;
        font-size: 16px;
        line-height: 20px;
        border-radius: 45px;
        background-color: #f1f1f1;
        position: fixed;
        bottom: 5px;
         }
        </style>
Hari Reddy
  • 11
  • 2
  • There is some discussion of adding Auto Complete to WebChat here: https://github.com/Microsoft/BotFramework-WebChat/issues/476 – Eric Dahlvang Jun 27 '18 at 23:59
  • `Issue2: if i click on suggestion it comes into the text box and when i am giving space only the message will go.` [Same issue](https://stackoverflow.com/questions/49527724/query-auto-completion-in-c-sharp-bot-in-bot-framework/49530202#49530202) appears when I attach jQuery Autocomplete widgets to webchat input box. – Fei Han Jun 28 '18 at 06:24

0 Answers0