jQueryUI自动完成 - 如何将搜索词与关键字列表进行匹配并显示匹配结果？

Question

我正在尝试使用jQueryUI自动完成为我的网站中的各种功能页面实现网站快速搜索功能。我想你可以说它就像谷歌即时搜索，但它是我的网站索引页面。

因此，当他们搜索“创建”时，它会显示创建用户选项和创建组织选项。当他们搜索“创建用户”时，它只会显示创建用户选项。然后他们可以点击结果并加载该页面。这些只是一些链接。但正如你所看到的，每个页面都会有一些关键字/同义词，它们都指向相同的页面。

好的，所以checkSearchWordsMatchKeywords函数在最后肯定有效，因为我测试了它。什么不工作是我不知道我应该从jQueryUI搜索：函数返回。

此外，如果你知道如何优化checkSearchWordsMatchKeywords（）函数，那么我都是耳朵。 :)

编辑：下面工作液更新（与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()来显示菜单。