title: jQueryUI Autocomplete - how to match search words with a list of keywords and show the matched results?
body: <p>I'm trying to use jQueryUI Autocomplete to implement a site quick searching feature for various functionality pages in my site. I guess you could say it is like Google Instant Search but it's indexing pages on my site.</p>
  
  <p>So when they search for "create" it will bring up the Create user option and the Create organisation option. When they search for "create use" it will only show the Create User option. Then they can click on the results and it will load up that page. 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.</p>
  
  <p>Ok so the checkSearchWordsMatchKeywords function at the end there definitely works because I've tested it. What isn't working is I don't know what I'm supposed to return from the jQueryUI search: function.</p>
  
  <p>Also if you know how to optimise that checkSearchWordsMatchKeywords() function then I'm all ears. :)</p>
  
  <p><em><strong>Edit:</strong> updated with working solution below (works with jQueryUI 1.9.x):</em></p>
  
  <pre class="lang-js prettyprint-override"><code>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 &lt; 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 $('&lt;li&gt;&lt;/li&gt;')
          .data('item.autocomplete', item )
          .append('&lt;a href="' + item.url + '"&gt;&lt;b&gt;' + item.label + '&lt;/b&gt;&lt;br&gt;' + item.desc + '&lt;/a&gt;')
          .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 &amp; 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 &lt; numOfSearchWords; i++)
      {
          // For each keyword
          for (var j = 0; j &lt; 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;
  }
  </code></pre>
  
  <p>Jump to page
      </p>