Note that there are some explanatory texts on larger screens.

plurals
  1. POtypeahead.js - match query to start of results
    text
    copied!<p>I am using Twitter typeahead.js for searching a list of names and the client wants the suggestions based on first names.</p> <p>Is there an option to make Twitter typeahead.js match a search query with the start of each result, rather than anywhere within the string? </p> <p>I can see a <code>beginsWithQuery</code> variable within the <code>_updateHint</code> function, however I don't know how to specify this as an option, or even if this relates to what I am trying to achieve.</p> <p>The jQuery function which is calling typeahead in my project is:</p> <pre><code>$( 'input[name="s"]' ) .typeahead( { name: 'search', remote: wp_typeahead.ajaxurl + '?action=ajax_search&amp;fn=get_ajax_search&amp;terms=%QUERY', template: [ '&lt;p&gt;&lt;a href="{{url}}"&gt;{{value}}&lt;/a&gt;&lt;/p&gt;', ].join(''), engine: Hogan } ) ); </code></pre> <p>I can see the response from the <code>ajax_search</code> is in the format</p> <pre><code>[ { "tokens" : [ "First","Last" ], "url" : "http://url/for/first-last/", "value" : "First Last" }, ] </code></pre> <p>so I need to figure out how to filter this JSON to include only datums for which <code>token[0]</code> matches the search query.</p> <p>EDIT: Additional notes about what I had to add to do to implement the <code>prefetch</code> solution work as per @jharding's anwser below.</p> <p>This is a WordPress site, and the names the site is search are the titles of a custom post type of 'model'. I created a file called list-all-models.php which outputs an array of the model names in the required datum format.</p> <pre><code>&lt;?php define('WP_USE_THEMES', false); require('../../../../wp-load.php'); // depends on where this file is $args = array ( 'post_type' =&gt; 'model', 'orderby' =&gt; 'title', 'order' =&gt; 'asc', 'posts_per_page' =&gt; -1 ); $models = get_posts($args); $model_names = array(); foreach ($models as $i =&gt; $model) { $model_names[$i]['value'] = $model-&gt;post_title; $model_names[$i]['url'] = $model-&gt;guid; $model_names[$i]['tokens'] = explode(' ', $model-&gt;post_title); } header("Content-type: application/json"); die(json_encode($model_names)); ?&gt; </code></pre> <p>I then used the URL of this file as the url parameter in the <code>prefetch</code> option.</p> <p>Now the search is working exactly as intended :)</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload