Ошибка автозаполнения JQuery: невозможно прочитать свойство 'label' из неопределенного - PullRequest
0 голосов
/ 11 марта 2019

Что касается Автозаполнение в Bot Framework , я реализовал метод GET для поиска URL.

Ниже мой код:

<!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"></div>
  </body>
 </html>
 <script src="https://cdn.botframework.com/botframework- 
  webchat/latest/CognitiveServices.js"></script>
  <script type="text/javascript">
 var searchServiceName = "abc";
 var searchServiceApiKey = "xyzabc";
 var indexName = "index1";
 var apiVersion = "2017-11-11";
var corsanywhere = "https://cors-anywhere.herokuapp.com/";

var suggestUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/suggest?api-version=" + apiVersion + "&search=how";
var autocompleteUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/autocomplete?api-version=" + apiVersion;
var searchUri = corsanywhere + "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs?api-version=" + apiVersion;


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

  </script>
   <script type="text/javascript">
        $(function () {
        $("input.wc-shellinput").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "GET",
                url: searchUri,
                dataType: "json",
                headers: {
                    "api-key": searchServiceApiKey,
                    "Content-Type": "application/json",

                    "Access-Control-Allow-Origin": "SAMPLEURL",
                    "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) {


                        //RESPONSE FORMATTED as per requirements to hold questions based on input value(Below code is only for my reference i added)
                        var result = "";
                        var inputValue = request.term;
                        for (i = 0; i < data.value.length; i++) {
                            var allquestions = data.value[i].questions;

                            if (allquestions.length > 0) {
                                for (j = 0; j < allquestions.length; j++)
                                    if (allquestions[j].toLowerCase().indexOf(inputValue.toLowerCase()) != -1) {
                                        result = result + "," + allquestions[j];
                                    }
                            }
                        }
                        if (result != null) {
                            alert(result);

                            response(data.value.map(x => x["@search.text"])); ---Caught Error at this STEP
                        }
                        else { alert("no data"); }



                    }
                    else {
                        alert("No response for specific search term");
                    }
                }
            });
        },
        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>

Мой пример вывода API:

    { "@odata.context": "URL", "value": [{ "questions": [ "where are you", "where have you been", ] }, { "questions": [ "How are you?" ] } ] } 

Я получаю ответ API успешно (data.value), но получил исключение на

 response(data.value.map(x => x["@search.text"]));

Сообщение об ошибке: Uncaught TypeError: Невозможно прочитать свойство 'label' из неопределенного

Я пытался заменить @search.text на "значение" и "@ data.context" , но все еще получаю ошибку. Я хочу отобразить данные всех вопросов на основе пользовательского ввода

1 Ответ

0 голосов
/ 12 марта 2019

Я наконец-то смог исправить мою проблему с помощью приведенного ниже решения.

Примечание: Метод "ответа" JQuery Autocomplete принимает массив в качестве типа данных.

Решение: 1) когда мы передаем результаты всего массива API в метод «response», результаты должны иметь ключевое слово «label» с правильными данными.

образец кодаПередача всех результатов API:

   response(data.value.map(x => x["@search.text"]));

2) когда у нас нет ключевого слова label в ответе API, мы должны отформатировать ответ согласно требованиям и создать новый массив данных, которые мы хотим отобразитькак автоматическое предложение и переход к методу "response".

Ниже приведен код для того же самого:

    var autoSuggestDataToDisplay= [];
                        var inputValue = request.term;
                        for (i = 0; i < data.value.length; i++) {
                            var allquestions = data.value[i].questions;

                            if (allquestions.length > 0) {
                                for (j = 0; j < allquestions.length; j++)
                                    if (allquestions[j].toLowerCase().indexOf(inputValue.toLowerCase()) != -1) {
                                        result = result + "," + allquestions[j];
                                        if (autoSuggestDataToDisplay.indexOf(allquestions[j].toLowerCase()) === -1) {
                                            autoSuggestDataToDisplay.push(allquestions[j].toLowerCase());
                                        }
                                    }
                            }
                        }
                        if (result != null) { response(autoSuggestDataToDisplay); }
                        else { alert("no data"); }

Поскольку у меня нет "label" в ответе API, я следовал подходу # 2 и решилэто.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...