[英]jqueryui autocomplete how to pass in an array of keywords to search through for each object?
I'm trying to use jQueryUI Autocomplete to implement a site quick searching feature for various functionality pages in my site. 我正在尝试使用jQueryUI自动完成功能为网站中的各种功能页面实现网站快速搜索功能。 So when they search for "create" it will bring up the Create user option and the Create organisation option.
因此,当他们搜索“创建”时,它将弹出“创建用户”选项和“创建组织”选项。 When they search for "create u" it will only show the Create User option.
当他们搜索“创建u”时,只会显示“创建用户”选项。 These are just some of the links.
这些只是一些链接。 But as you can see, each page will have some various keywords/synonyms that would all point to the same page.
但是正如您所看到的,每个页面都有一些指向同一页面的各种关键字/同义词。
Basically I want a structure like this: 基本上我想要这样的结构:
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/'
}];
So as they're typing it should look up the links array then search through the keywords arrays looking for a partial text match based on what they've typed in. If it finds one then it will show that entry in the auto completer. 因此,当他们键入内容时,应查找links数组,然后搜索关键字数组以根据他们键入的内容查找部分文本匹配项。如果找到一个,则将在自动完成程序中显示该条目。 But if the second or third search word doesn't match any of the keywords then it will not show it.
但是,如果第二或第三个搜索词与任何关键字都不匹配,则不会显示该关键词。
Now I've heard you may be able to do it by supplying the source as a callback? 现在,我听说您可以通过提供源作为回调来做到这一点?
Here's my code so far (Edit: updated with working solution): 到目前为止,这是我的代码(编辑:使用有效的解决方案更新):
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 = [];
// Get entered search terms (request.term) from user and search through all links keywords
for (var k = 0; k < links.length; 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 )
{
$( "#searchTerms" ).val( ui.item.label );
return false;
},
select: function( event, ui )
{
// Redirect to the url
$( "#searchTerms" ).val( ui.item.label );
window.location.replace(ui.item.url);
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( '<a href=""><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(searchWords, keywords)
{
var searchWords = searchWords.toLowerCase(); // Lowercase the search words
var searchWords = searchWords.split(' '); // 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;
}
});
Ok so the checkSearchWordsMatchKeywords function at the end there definitely works because I've tested it. 好的,最后的checkSearchWordsMatchKeywords函数肯定可以正常工作,因为我已经对其进行了测试。 What isn't working is I don't know what I'm supposed to return from the jQueryUI search: function.
不起作用的是,我不知道从jQueryUI search:函数返回什么。
Any help please? 有什么帮助吗?
I run over this issue at work. 我在工作中遇到了这个问题。 In order to fix it we created our own search function.
为了解决这个问题,我们创建了自己的搜索功能。 In order to search in the
keywords
even if they are in the actual string you want to display. 为了搜索
keywords
即使它们在您要显示的实际字符串中也是如此。
$( "#searchTerms" ).autocomplete({
search: function(event, ui) {
// Add your super search function here
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.