Question

我想在我使用microsoft bot框架开发的c＃bot中实现自动完成功能，并作为iframe添加到我的门户网站中。是否可以在此机器人中实现查询建议或查询自动完成？我也试过这个解决方案

Auto complete in Bot Framework

但我没有发现它对我有帮助。我可以在这里使用jquery自动完成吗？

https://jqueryui.com/autocomplete/

请帮助我。

提前致谢。

Answer 1

我可以在这里使用jquery自动完成吗？

根据我的测试，我们可以将jQuery Autocomplete widgets附加到网络聊天输入框。以下示例代码供您参考。

data class CheckoutResponseMdl(val items: ItemsCheckout) : Parcelable {
constructor(parcel: Parcel) : this(TODO("items")) {
}

override fun writeToParcel(parcel: Parcel, flags: Int) {

}

override fun describeContents(): Int {
    return 0
}

companion object CREATOR : Parcelable.Creator<CheckoutResponseMdl> {
    override fun createFromParcel(parcel: Parcel): CheckoutResponseMdl {
        return CheckoutResponseMdl(parcel)
    }

    override fun newArray(size: Int): Array<CheckoutResponseMdl?> {
        return arrayOfNulls(size)
    }
}}

测试结果：

注意：我输入<!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>，它会显示我选择的列表项，然后我选择一个项目，例如 ActionScript ，如果我直接点击发送按钮，它只会向机器人发送a。为了避免这种情况，我们可以手动输入空格（或其他字符）并在点击发送按钮之前删除它们。

Answer 2

从4天开始我就遇到了这个问题。最后我使它起作用了。

您需要为input.wc-shellinput元素编写jQuery。我已经通过天蓝色搜索实现了它。

<!DOCTYPE html>
<html>
<head>
    <link href="../Styles/Skins/botchat.css" rel="stylesheet" />
    <link href="../Styles/skins/customwebchat.css" rel="stylesheet">
    <link href="styles/pages.css" rel="stylesheet" />
</head>
<body>`enter code here`
    <div id="body-container">

        <div class="bot-container">
            <div id="bot" class="snow"></div>
        </div>
    </div>

    <!--  <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>-->
    <script src="js/botchat.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/CognitiveServices.js"></script>
    <script>

        const speechOptions = {

            speechRecognizer: new CognitiveServices.SpeechRecognizer({ subscriptionKey: '' }),

            speechSynthesizer: new CognitiveServices.SpeechSynthesizer({

                gender: CognitiveServices.SynthesisGender.Female,

                subscriptionKey: '',

                voiceName: 'Microsoft Server Speech Text to Speech Voice (en-US, JessaRUS)'

            })

        };

        BotChat.App({
            directLine: { secret: '' },
            user: { id: 'userid' },
            bot: { id: 'botid' },
            speechOptions: speechOptions,
            resize: 'detect'
        }, document.getElementById("bot"));
    </script>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/jquery-ui.js"></script>

    <script src="/Scripts/jquery.autocompleteInline.js"></script>


    <link href="/Content/jquery-ui.css" rel="stylesheet" />
    <link href="/Content/tutorial.css" rel="stylesheet" />
    <link href="/Content/jquery.autocompleteInline.css" rel="stylesheet" />

    <script  type="text/javascript">

        $(function () {
            $("input.wc-shellinput").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: suggestUri,
                        dataType: "json",
                        headers: {
                            "api-key": searchServiceApiKey,
                            "Content-Type": "application/json",

                            "Access-Control-Allow-Origin": "*",
                            "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE"
                        },
                        data: JSON.stringify({
                            top: 5,
                            fuzzy: false,
                            suggesterName: "", //Suggester Name according to azure search index.
                            search: request.term
                        }),
                        success: function (data) {
                            if (data.value && data.value.length > 0) {
                                userinput = data.value;
                                console.log(userinput);
                                response(data.value.map(x => x["@search.text"]));
                            }
                        }
                    });
                },
                minLength: 3,
                position: {
                    my: "left top",
                    at: "left bottom",
                    collision: "fit flip"
                },
                select: function (Event, ui) {

                    $(document).ready(function () {

                        var input = document.getElementsByClassName("wc-shellinput")[0];
                        var lastValue = input.value;
                        input.value = ui.item.value;
                        var event = new CustomEvent('input', { bubbles: true });
                        // hack React15
                        event.simulated = true;
                        // hack React16
                        var tracker = input._valueTracker;
                        if (tracker) {
                            tracker.setValue(lastValue);
                        }

                        input.dispatchEvent(event);
                    })

                    $('wc-textbox').val("");
                    Event.preventDefault();

                    $(".wc-send:first").click();
                }

            });
        });


    </script>
    <script>
        var searchServiceName = "";
        var searchServiceApiKey = "";
        var indexName = "";
        var apiVersion = "";

        var suggestUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/suggest?api-version=" + apiVersion;
        var autocompleteUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/autocomplete?api-version=" + apiVersion;
        var searchUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/search?api-version=" + apiVersion;
    </script>
</body>

</html>

在bot框架中的c＃bot中查询自动完成

2 个答案: