jQueryUI自动填充 – 如何将搜索词与关键字列表匹配并显示匹配的结果？

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

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

好的，所以checkSearchWordsMatchKeywords函数最后确实有效，因为我已经测试过了。 什么是行不通的是我不知道我应该从jQueryUI search：function返回什么。

此外，如果您知道如何优化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 $('
  • ') .data('item.autocomplete', item ) .append('' + item.label + '
    ' + item.desc + '    ') .appendTo(ul); }; /** * Check that each word in a search string matches at least one keyword in an array * Eg 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; }

    跳转到页面

    我不认为“搜索”事件是你所做的事情的地方。 您应该将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()以显示菜单。

    Interesting Posts