gpt4 book ai didi

javascript - jQueryUI Autocomplete - 如何将搜索词与关键字列表匹配并显示匹配结果?

转载 作者:行者123 更新时间:2023-11-29 10:22:19 26 4
gpt4 key购买 nike

我正在尝试使用 jQueryUI Autocomplete 为我站点中的各种功能页面实现站点快速搜索功能。我想您可能会说它类似于 Google 即时搜索,但它在我的网站上为页面编制索引。

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

好的,最后的 checkSearchWordsMatchKeywords 函数肯定有效,因为我已经测试过了。不起作用的是我不知道应该从 jQueryUI search: 函数返回什么。

此外,如果您知道如何优化 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;
}

跳转到页面

最佳答案

我不认为“搜索”事件是执行您要执行的操作的地方。您应该将 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() 以显示菜单。

关于javascript - jQueryUI Autocomplete - 如何将搜索词与关键字列表匹配并显示匹配结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9040137/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com