Question

我正在尝试使用BotChat和jquery在chatbot中实现自动建议，并使用数组将多个值存储在单个键中。如何在一行中保留多个自动建议。当我输入hi（文本字段）时，它会给出多个建议，然后单击该建议，它将自动完成它，这应该类似于Google的建议。

问题1：我的代码仅适用于具有单个值的单个键。问题2：如果我单击建议，它会出现在文本框中，当我提供空格时，只会显示该消息。

代码：

<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代码：

<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>

像Google一样的聊天机器人建议-使用Jquery

0 个答案: