2012-01-26 10 views
0

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検索関数から返されるものがわからないということです。

お願いします。

+0

ソリューションはこっちです: http://stackoverflow.com/questions/9040137/jqueryui-autocomplete-how-to-match-search-words-with-a-list-of-keywords -and-sh/904381​​4#904381​​4 – zuallauz

答えて

1

私は職場でこの問題を乗り越えています。それを修正するために、私たちは独自の検索機能を作成しました。 keywordsで検索するには、表示する実際の文字列内にある場合でも。

$("#searchTerms").autocomplete({ 
    search: function(event, ui) { 
     // Add your super search function here 
    } 
}); 
+0

最後に見つかった解決策:http://stackoverflow.com/questions/9040137/jqueryui-autocomplete-how-to-match-search-words-with-a-list-of-キーワード・アンド・シュ – zuallauz

関連する問題