jQueryUI Autocomplete - как найти слова поиска со списком ключевых слов и показать согласованные результаты?

Question

Я пытаюсь использовать автозаполнение jQueryUI для реализации функции быстрого поиска сайта для различных страниц функциональности на моем сайте. Я думаю, вы могли бы сказать, что это похоже на Google Instant Search, но это индексирование страниц на моем сайте.

Поэтому, когда они ищут «создать», это вызовет параметр «Создать пользователя» и «Создать организацию». Когда они ищут «создать использование», он будет показывать только параметр «Создать пользователя». Затем они могут щелкнуть по результатам и загрузить эту страницу. Это лишь некоторые из ссылок. Но, как вы можете видеть, каждая страница будет содержать несколько ключевых слов/синонимов, которые все указывают на одну и ту же страницу.

Хорошо, так что функция checkSearchWordsMatchKeywords в конце определенно работает, потому что я ее протестировал. Что не работает, я не знаю, что я должен возвращать из функции jQueryUI search:.

Также, если вы знаете, как оптимизировать эту функцию checkSearchWordsMatchKeywords(), тогда я все уши. :)

Edit: обновляется с рабочим раствором ниже (работает с jQueryUI 1.9.x):

var links = [ 
{ 
    keywords: ['create', 'add', 'make', 'insert', 'user'], 
    label: "Create user", 
    desc: "Create a user in the system", 
    url: 'http://mysite.com/user/create/' 
}, 
{ 
    keywords: ['create', 'add', 'make', 'insert', 'organisation'], 
    label: "Create organisation", 
    desc: "Create an organisation in the system", 
    url: 'http://mysite.com/organisation/create/' 
}]; 

$('#searchTerms').autocomplete(
{ 
    minLength: 2, 
    source: function(request, response) 
    { 
     var matched = []; 
     var numOfLinks = links.length; 

     // Get entered search terms (request.term) from user and search through all links keywords 
     for (var k = 0; k < numOfLinks; k++) 
     { 
      // If it matches, push the object into a new array 
      if (checkSearchWordsMatchKeywords(request.term, links[k].keywords)) 
      { 
       matched.push(links[k]); 
      } 
     } 

     // Display the filtered results 
     response(matched); 
    }, 
    focus: function(event, ui) 
    { 
     // When the item is selected, put the label text into the search box 
     $('#searchTerms').val(ui.item.label); 
     return false; 
    }, 
    select: function(event, ui) 
    { 
     // Put the selected link's label in the text box and redirect to the url 
     $('#searchTerms').val(ui.item.label); 

     // Redirect to the page using .href so the previous page is saved into the user's browser history 
     window.location.href = ui.item.url; 
     return false; 
    } 
}) 
.data('autocomplete')._renderItem = function(ul, item) 
{ 
    // Show a description underneath the link label. Using the hyperlink here too so that mouse click still works 
    return $('<li></li>') 
     .data('item.autocomplete', item) 
     .append('<a href="' + item.url + '"><b>' + item.label + '</b><br>' + item.desc + '</a>') 
     .appendTo(ul); 
}; 

/** 
* Check that each word in a search string matches at least one keyword in an array 
* E.g. searchWords = 'create use' and keywords = ['create', 'add', 'make', 'insert', 'user'] will return true 
*/ 
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; 
} 

Перейти на страницу

Answer 1

Я не "искать" событие это место, чтобы делать то, что вам нужно. Вы должны скорее реализовать вариант source как обратный вызов:

$("#searchTerms").autocomplete({ 
    ... 
    source: function(request, response) {   
     var matched = []; 
     // Search "request.term" through all links keywords 
     for (var k = 0; k < links.length; k++) { 
      if (checkSearchWordsMatchKeywords(request.term, links[k]['keywords'])) { 
       matched.push(links[k]); 
      } 
     } 
     // display the filtered results 
     response(matched); 
    } 
}); 

• request объекта содержит term свойства, которое является текстом, который вводится на входе
• параметр response является обратным вызовом, который вы должны позвонить в отобразить результаты.

В основном вы получаете и фильтруете свои данные и передаете его response() для отображения меню.