Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery UI autocomplete using csv with two fields
    text
    copied!<p>I'm trying to set up an autocomplete that's getting its data from a csv. The csv has a list of restaurant names and food types. I've gone over some of the other posts here at SO, and the autocomplete documentation, but I think it's the two fields in the csv, rather than one field that is tripping me up.</p> <p>Example csv data:</p> <pre><code>McDonald's,Fast Food Olive Garden,Italian Manny's,Steakhouse Carino's,Italian etc... </code></pre> <p>The user should be able to search by either food type or restaurant name:</p> <pre><code>&lt;body&gt; &lt;br&gt; &lt;br&gt; &lt;label id="lblSearchRestaurant" for="txtSearchRestaurant"&gt;Search for a Restaurant&lt;/label&gt; &lt;input type="text" id="txtSearchRestaurant"&gt; &lt;/body&gt; </code></pre> <p>Here's what I've tried for the autocomplete setup:</p> <pre><code>$(function() { $( "#txtSearchRestaurant" ).autocomplete({ source:searchRestaurant.php, select: function( event, ui ) { $( "#search" ).val( ui.item.label + " / " + ui.item.actor ); return false; } }).data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "&lt;li&gt;" ) .data( "item.autocomplete", item ) .append( "&lt;a&gt;&lt;strong&gt;" + item.label + "&lt;/strong&gt; / " + item.actor + "&lt;/a&gt;" ) .appendTo( ul ); }; }); </code></pre> <p>I need to serve the data using a PHP script. Here's what I have at this point:</p> <pre><code>&lt;?php $header = NULL; $restaurants = array(); if (($file = fopen('restaurants.csv', 'r')) !== FALSE) { while (($row = fgetcsv($file, 1000, ',')) !== FALSE) { if(!$header) $header = $row; else $data[] = array_combine($header, $row); } fclose($file); } $term = $_GET['term']; foreach($restaurants as $k=&gt;$v) { if(preg_match("/^$term/i", $v)) { $return[] = $v; } } foreach($restaurants as $k =&gt; $v) { if(preg_match("/$term/i", $v)) { $return[] = $v; } } echo json_encode(array_values(array_unique($return))); </code></pre> <p>None of the above has worked, so I tried formating the restaurant data in to an array, rather than just comma-separated values:</p> <pre><code>[ {name:"McDonald's",type:"Fast Food"}, {name:"Olive Garden",type:"Italian"}, {name:"Manny's",type:"Steakhouse"}, {name:"Carino's",type:"Italian"} ]; </code></pre> <p>I tried that locally in the <code>&lt;script&gt;</code> tag and in a separate file, but neither worked.</p> <p>So, none of the above worked for me, but I'm not the best at arrays yet and for that matter, using JSON data, so I probably don't have the php script set up properly.</p> <p>I'd appreciate it if someone could point me in the right direction here.</p> <p>Thanks.</p> <p><strong>Note to potential answers:</strong> The jquery UI autocomplete, the format of the incoming data (as described above) and using PHP to get the data from the csv to the autocomplete are all requirements for this. Those three stipulations are, unfortunately, not under my control.</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