Как искать ключевые слова в автозаполнении (jQuery UI)

0

Я пытаюсь загрузить файл xml и активировать Autocomplete (jQuery UI) для отображения данных из xml в поле ввода, в то время как пользователь начинает вводить в поле ввода.

В настоящее время в моем скрипте используются source: data, где данные представляют собой загруженные массивы xml через функцию.map jquery. Вход пользователя ищется через value поля XML, но теперь мне нужно сделать поиск по keywords поля. Это потому, что ключевые слова более достоверны в моем требовании, когда одно значение может содержать два или три ключевых слова.

Вчера я искал в google и stackoverflow весь вечер и вчера вечером в полночь, и нашел страницу в [ qaru.site/questions/1878537/... ] и попытался использовать код, указанный на этой странице.

Код работает почти отлично, но я не могу просмотреть некоторые элементы в автозаполнении. Данные загружаются штрафом и показывают правильное значение для любого вызванного индекса массива данных: (console.log(data[1].value);= sparrow в хром-консоли. (Согласно моему xml)

но после функции поиска: checkSearchWordsMatchKeywords(request.term, keywords)), значение [k] изменено, и оно возвращает только некоторые результаты, а не все.

Сначала я подумал, что он не возвращает первый элемент, поэтому я скопировал его и вставил его, чтобы сделать копию его как [0].. для целей тестирования. но, похоже, это тоже не работает, поэтому я предполагаю, что это не показывает этот конкретный набор ключевых слов.

Я не собираюсь использовать этот скрипт как есть,... вместо этого я размещаю здесь информацию о том, как я могу искать KEYWORDS в автозаполнении. Если эта функция неверна, пожалуйста, можете ли кто-нибудь предоставить другую функцию или предложить другой сценарий автозаполнения/плагин для этой цели? Я намерен использовать только jQuery для этого.

Следующий код возвращает только "Parrot", "Crow", "Pidgeon", но не возвращает "Sparrow" при вводе "t" в поле ввода. Согласно ключевым словам, он также должен возвращать "Воробей", но это не так.

XML

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<items xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <item>
        <id>0</id>
        <value>NoValue</value>
        <url>#noValue</url>
        <keywords>ewo;reeFour;veSix</keywords>
    </item>
    <item>
        <id>1</id>
        <value>Sparrow</value>
        <url>gallery/birds_1.html</url>
        <keywords>OneTwo;ThreeFour;FiveSix</keywords>
    </item>
    <item>
        <id>2</id>
        <value>Parrot</value>
        <url>gallery/birds_2.html</url>
        <keywords>SevenEigh;Nineen;tElevenwelve</keywords>
    </item>
    <item>
        <id>3</id>
        <value>Crow</value>
        <url>gallery/birds_3.html</url>
        <keywords>ThirteenFourteen;FifteenSixteen;SeventeenEighteen</keywords>
    </item>
    <item>
        <id>4</id>
        <value>Dove</value>
        <url>gallery/Birds_4.html</url>
        <keywords>Nineeenweny;wenyOnewenywo;wenyhreewenyFour</keywords>
    </item>
    <item>
        <id>5</id>
        <value>Pidgeon</value>
        <url>gallery/birds_5.html</url>
        <keywords>TwentyFiveTwentySix;TwentySevenTwentyEight;TwentyNineThirty</keywords>
    </item>
</items>

Javascript:

        /* get xml file using ajax */
$.ajax({
    url: "birds_search.xml",
    dataType: "xml",
    success: function(xmlResponse) {
         /* parse response */
         var data = $("item", xmlResponse).map(function() {
         return {
             id: $("id", this).text(),
             value: $("value", this).text(),
             url: $("url", this).text(), 
             comma_keywords: $("keywords", this).text(), 
             //can add "../" to the url via label tag: label: "../" + url; ... and then in SELECT below, : ui.item.label. (for products directory.xml)
         };
         }).get();
        console.log(data[1].value);

         /* bind the results to autocomplete */
         $("input#autocomplete_search").autocomplete({
             source: function(request, response) {        
                        var matched = [];
                        var k;
                        // Search "request.term" through all links keywords
                        for (k = 0; k < data.length; k++) {
                        var keywords = data[k].comma_keywords.split(';');
                            //console.log(k);
                            if (checkSearchWordsMatchKeywords(request.term, keywords)) {
                                matched.push(data[k]);
                                console.log(k);
                            }
                        }
                        // display the filtered results
                        response(matched);
                    },
             //minLength: 2,
             select: function (event, ui) {
            window.location = ui.item.url;
            }
         });




     }
});




function checkSearchWordsMatchKeywords(searchString, keywords)
{
    var searchWords = searchString.toLowerCase().split(' ');    // Lowercase the search words & break up the search into separate words
    var numOfSearchWords = searchWords.length;                  // Count number of search words
    var numOfKeywords = keywords.length;                        // Count the number of keywords
    var matches = [];                                           // Will contain the keywords that matched the search words

    // For each search word look up the keywords array to see if the search word partially matches the keyword
    for (var i = 0; i < numOfSearchWords; i++)
    {
        // For each keyword
        for (var j = 0; j < numOfKeywords; j++)
        {   
            // Check search word is part of a keyword
            if (keywords[j].indexOf(searchWords[i]) != -1)
            {
                // Found match, store match, then look for next search word
                matches.push(keywords[j]);
                break;
            }
        }
    }

    // Count the number of matches, and if it equals the number of search words then the search words match the keywords
    if (matches.length == numOfSearchWords)
    {
        return true;
    }

    return false;
}

Спасибо за любую помощь.

Теги:
autocomplete

1 ответ

0
Лучший ответ

Ну, я отвечаю на свой вопрос довольно поздно... но так я, наконец, смог его достичь. Я только копирую/вставляю код здесь, как в моем js файле, так что ошибки не возникает. В моем Вопросе я birds.xml пример birds.xml, который теперь в моем случае, products.xml...

переменная fileStatus имеет значение true или false в зависимости от местоположения файла xml.... который я установил во время запроса ajax для проверки файла (не включенного в этот код)... вы можете изменить это согласно вашему желанию, как это необязательно. Остальная часть кода должна быть в порядке для автозаполнения.... или вы можете просто изменить любые биты кода, которые не соответствуют вашему требованию. : D

$("input#q").autocomplete({
             source: function products(request, response) {   // Function PRODUCTS() 
                        function hasMatch(s) {
                        //console.log(s);
                        //console.log(request.term.toLowerCase());
                        return s.toLowerCase().indexOf(request.term.toLowerCase())!==-1;
                    }
                    var i, l, obj, matches = [];
                    //console.log(data_global);
                    if (request.term==="") {
                        response([]);
                        return;
                    }
                    for  (i = 0; i < data.length; i++) {
                    obj = data[i];
                    //var truefalseVar;
                    //console.log(obj.value);
                    function truefalse(){
                    for(j=0;j<obj.gen_name.length;j++)
                    { if( hasMatch(obj.gen_name[j]) )
                        return true;
                        //else truefalseVar = false;
                    //  console.log(obj.gen_name[j])
                    }
                    return false;
                    }
                    if (hasMatch(obj.value) || truefalse() ) {
                        matches.push(obj);
                        }
                    }
                response(matches);
                },
            /* END OF  Function PRODUCTS() */
             //minLength: 2,

             focus: function (event, ui) {
                    $(event.target).val(ui.item.gen_name);
                    event.preventDefault();
                    return false;
                },

             select: function (event, ui) {
             if(fileStatus){
             var prouctsURL = 'products/' + ui.item.url;
             }
             else var prouctsURL = ui.item.url;
            window.location = prouctsURL;
            }
         });

Ещё вопросы

Сообщество Overcoder
Наверх
Меню