title: Creating clickable dynamic links with typeahead.js
body: <p>I'd like to make it so the suggested results in my search's autocomplete link to the specific restaurant on the site. </p>
  
  <p><strong>Note:</strong> I came across this <a href="https://stackoverflow.com/q/23510474/3046413">post</a> but it uses a static array of objects. Unlike this post I'm looking to generate links from the <strong>server-side</strong>.</p>
  
  <pre><code>var links = [{name: "abc", link: "http://www.example1.com"}, 
               {name: "nbc", link: "http://www.example2.com"}];
  
  var source = new Bloodhound({
    ...
    local: links
  });
  </code></pre>
  
  <p>In my case I'm querying from Rails a database so the <code>name</code> would be the restaurant's name and the <code>link</code> would be the <code>restaurant_path</code>. Based on what my current code, how I can I accomplish this? Let me know if any additional code is needed.</p>
  
  <pre><code>$(function() {
    var restaurants = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: { 
        url: "/search/autocomplete?query=%QUERY",
        wildcard: "%QUERY"
      }
    });
  
    restaurants.initialize();
  
    $('#autocomplete').typeahead(null, {
      displayKey: 'name',
      source: restaurants.ttAdapter()
    });
  });
  </code></pre>
  
  <p>The way my restaurant path currently looks is as follows:</p>
  
  <pre><code>localhost:3000/restaurants/blue-smoke
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>Following guest271314 suggestion I was able to find the return value for my restaurant objects, which includes the appropriate slugs (i.e. <code>blue-smoke</code>) to link up the suggested results.</p>