Databases
StackOverflow2013
Postsdbo
POjQuery Category Search with Remote Results and Caching
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Category Search with Remote Results and Caching
    text
    copied!<p>I am trying to use <a href="http://jqueryui.com/autocomplete/#remote-with-cache" rel="nofollow">JQuery Category Autocomplete (documented here)</a> to create a search box for my website that will search through results that are in another file located at "/search_basic.php" (file contents are listed below). I would like the results to be categorized and cached in browser for future. If no results are available, the user should also be notified. I am able to do each of these separately except for pulling the results from a remote file and caching. I can not figure out how to get my project working as a whole.</p> <p>Here is the code I am using:</p> <p>HTML5:</p> <pre><code>&lt;div class="ui-widget"&gt; &lt;label for="search"&gt;Search: &lt;/label&gt; &lt;input id="search" /&gt; &lt;p id="empty-message"&gt;&lt;/p&gt; &lt;/div&gt; </code></pre> <p>CSS3:</p> <pre><code>.ui-autocomplete-category { font-weight: bold; padding: .2em .4em; margin: .8em 0 .2em; line-height: 1.5; } .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </code></pre> <p>JQuery:</p> <pre><code>&lt;script&gt; $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "&lt;li class='ui-autocomplete-category'&gt;" + item.category + "&lt;/li&gt;" ); currentCategory = item.category; } that._renderItemData( ul, item ); }); } }); &lt;/script&gt; &lt;script&gt; $(function() { var cache ={}; $( "#search" ).catcomplete({ minLength: 0, source: function( request, response ) { var term = request.term; if ( term in cache ) { response( cache[ term ] ); return; } $.getJSON( "search_basic.php", request, function( data, status, xhr ) { // Remote results file is located at search_basic.php cache[ term ] = data; response( data ); }); // If there are no results notify the user if (ui.content.length === 0) { $("#empty-message").text("No results found"); } else { $("#empty-message").empty(); } } }); }); &lt;/script&gt; </code></pre> <p>The following is the contents of search_basic.php:</p> <pre><code>header('Content-Type: application/json'); [ { "label": "annhhx10", "category": "Products" }, { "label": "annttop", "category": "Products" }, { "label": "anders", "category": "People" }, { "label": "andreas", "category": "People" } ] </code></pre> <p>Thank you in advance!</p> <p>Update 1: I got jQuery UI's remote example to function on my server, however it is not easily modifiable to implement without the extra data that it returns. <a href="http://jqueryui.com/resources/demos/autocomplete/remote.html" rel="nofollow">A working example can be seen here</a> and can be downloaded in their downloads section to view the remote json PHP file (sorry, I am unable to add more links with my SO reputation).</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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