I'm newbie to js. I found autocomplete tutorial and it works well.But autocomplete script configured for multiple values from db. It adds comma every time after found keyword then searchs for new keyword again. How to rewrite it for single value?
acompl.js
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#region" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown开发者_运维问答", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
source: function( request, response ) {
$.getJSON( "core/code/includes/search.php", {
term: extractLast( request.term )
}, response );
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
search.php
<?php
if ($term = @$_GET['term']) {
require 'db.php';
$q = $db->real_escape_string(strtolower($term).'%');
$query = $db->query("SELECT id, region FROM regions WHERE region like '$q'") or die(mysqli_error());
$results = array();
while ($row = $query->fetch_row()) $results[] = array( 'id' => $row[0] , 'label' => $row[1], 'value' => $row[1] );
echo json_encode($results);
}
?>
You should be able to use the remote datasource demo as a guide: http://jqueryui.com/demos/autocomplete/#remote. Replace the string value given to the "source" option with the location of your php script.
Update: I believe you're looking for something like this:
$("#birds").autocomplete({
source: function (request, response) {
$.getJSON("core/code/includes/search.php", {
term: request.term
}, response);
},
minLength: 2,
select: function(event, ui) {
log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value);
}
});
We have the same problem. I also found that in my research. Here is how I edited it. Hope it helps
$(function() {
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$(".search")
.bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("ui-autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
source: function(request, response) {
$.getJSON("search/", {
term: extractLast(request.term)
}, response);
},
search: function() {
if(this.value.length < 2){
return false;
}
},
focus: function() {
return false;
}
});
});
you just need to remove the (,) from this.value = terms.join( ", " ); line in select
like (this.value = terms.join( " " );)
精彩评论