jQueryUIオートコンプリートを使用して、サイト内のさまざまな機能ページのサイトクイック検索機能を実装しようとしています。したがって、「作成」を検索すると、「ユーザーの作成」オプションと「組織の作成」オプションが表示されます。彼らが「uを作成」を検索すると、「ユーザーの作成」オプションのみが表示されます。これらはリンクの一部です。しかし、あなたが見ることができるように、各ページには、すべて同じページを指す様々なキーワード/同義語がいくつかあります。彼らはそれがその後、リンクの配列を調べ、彼らがした内容に基づいて、テキストの部分一致を探しているキーワードアレイを検索しなければならない入力しているようにjqueryui autocomplete各オブジェクトを検索するキーワードの配列を渡す方法は?
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/'
}];
:
は基本的に私はこのような構造をしたいですそれが見つかると自動完成品にその項目が表示されます。しかし、第2または第3の検索語がいずれのキーワードとも一致しない場合、それは表示されません。
これで、ソースをコールバックとして提供することができると聞いてきましたか?ここで
は私のコードは、(:ワーキング溶液を用いて更新編集):これまでのところだ
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]を、私はそれをテストしてみたので、そこに終わりcheckSearchWordsMatchKeywords機能は間違いなく動作しますので。機能していないのは、jQueryUI検索関数から返されるものがわからないということです。
お願いします。
ソリューションはこっちです: http://stackoverflow.com/questions/9040137/jqueryui-autocomplete-how-to-match-search-words-with-a-list-of-keywords -and-sh/9043814#9043814 – zuallauz