jQuery UI autocomplete using csv with two fields -
i'm trying set autocomplete that's getting data csv. csv has list of restaurant names , food types. i've gone on of other posts here @ so, , autocomplete documentation, think it's 2 fields in csv, rather 1 field tripping me up.
example csv data:
mcdonald's,fast food olive garden,italian manny's,steakhouse carino's,italian etc... the user should able search either food type or restaurant name:
<body> <br> <br> <label id="lblsearchrestaurant" for="txtsearchrestaurant">search restaurant</label> <input type="text" id="txtsearchrestaurant"> </body> here's i've tried autocomplete setup:
$(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 $( "<li>" ) .data( "item.autocomplete", item ) .append( "<a><strong>" + item.label + "</strong> / " + item.actor + "</a>" ) .appendto( ul ); }; }); i need serve data using php script. here's have @ point:
<?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 $k=>$v) { if(preg_match("/^$term/i", $v)) { $return[] = $v; } } foreach($restaurants $k => $v) { if(preg_match("/$term/i", $v)) { $return[] = $v; } } echo json_encode(array_values(array_unique($return))); none of above has worked, tried formating restaurant data in array, rather comma-separated values:
[ {name:"mcdonald's",type:"fast food"}, {name:"olive garden",type:"italian"}, {name:"manny's",type:"steakhouse"}, {name:"carino's",type:"italian"} ]; i tried locally in <script> tag , in separate file, neither worked.
so, none of above worked me, i'm not best @ arrays yet , matter, using json data, don't have php script set properly.
i'd appreciate if point me in right direction here.
thanks.
note potential answers: jquery ui autocomplete, format of incoming data (as described above) , using php data csv autocomplete requirements this. 3 stipulations are, unfortunately, not under control.
here's jsfiddle hope want: http://jsfiddle.net/l8l6k/
the javascript has variable "data" @ top need populate data, using php (i believe said this.)
this data combined 2 variables:
var autocomp = new array(); var hash = new array(); (var i=0; < data.length; i++) { autocomp[i] = data[i].name + ' ' + data[i].type; hash[autocomp[i]] = data[i]; } 1) simple array, autocomp, concatenation of 2 values, name , type. passed jquery ui autocomplete source. way autocomplete search both "item" , "type".
2) associative array, hash, associates data object concatenated value.
both select function , renderitem function use hash original data object:
$( "#txtsearchrestaurant" ).autocomplete({ source:autocomp, select: function( event, ui ) { var d = hash[ui.item.label]; $( "#txtsearchrestaurant" ).val( d.name + " / " + d.type ); return false; } }).data( "ui-autocomplete" )._renderitem = function( ul, item ) { var d = hash[item.label]; return $( "<li>" ) .data( "item.autocomplete", d ) .append( "<a><strong>" + d.name + "</strong> / " + d.type + "</a>" ) .appendto( ul ); }; hope helps.
bqb
Comments
Post a Comment