问题
I am trying to adapt the following code to my application. Multiple Autocomplete jsfiddle The jsfiddle works -- my PHP application doesn't.
My application is a PHP based Xataface application that I have added a custom mobile create page to. I want to get the suggestion list from mysql.
It works fine for the first suggestion and then pops in the comma.
THE PROBLEM: The problem is that in my application it doesn't show a suggestion list for the second entry (after the comma).
I have done a lot of google searching and I don't see relevant pages that may help me out.
Can someone please help me get this to show the suggestion list for the second and subsequent entries into the field?
Below is my code...
My form is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Create Form Mobile 9</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="css/create9form.css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript">
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ initialize validation plugin jquery.validate.min.js
$(document).on("pageshow", "#create9Page", function() {
$("#cform9").validate();
});</script>
<script type="text/javascript">
$(function() {
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tagsf2").autocomplete({
//reference: http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/
minLength: 1,
source: "actions/tags.php",
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;
}
});
});
</script>
</head>
<body>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ debugging -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ end debugging -->
<div data-role="page" id="create9Page">
<div id="errorBox"><ul></ul></div>
<form action="index.php" id="cform9" method="POST" data-ajax="false">
<div data-role="fieldcontain">
<label for="notef2">Note:</label>
<textarea cols="40" rows="8" name="notef2" id="notef2" class="required"></textarea>
</div>
<div class="control-group">
<label for="tagsf2">TagsField: </label>
<div class="controls">
<input type="text" id="tagsf2" name="tagsf2" autocorrect="off" class="required" />
<!-- <input type="hidden" id="form_submitted" name="form_submitted" value="true" />-->
</div>
</div>
<input type="hidden" name="urlsave" value="<?php echo $url ?>" />
<input type="hidden" name="-action" value="create9note" />
<input type="submit" value="Submit" id="submit" name="submit" data-theme="a" />
</form>
</div>
</body>
</html>
My tags.php file is as follows..
<?php
require_once "configphp.dbc";
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql');
mysql_select_db($dbname);
$return_arr = array();
/* If connection to database, run sql statement. */
if ($conn) {
$fetch = \mysql_query("SELECT * FROM nte_tags where tags_list like '%" . mysql_real_escape_string($_GET['term']) . "%'");
/* Retrieve and store in array the results of the query. */
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['tags_id'] = $row['tags_id'];
$row_array['value'] = $row['tags_list'];
//$row_array['abbrev'] = $row['abbrev'];
array_push($return_arr, $row_array);
}
}
/* Free connection resources. */
//mysql_close($conn);
/* Toss back results as json encoded array. */
echo json_encode($return_arr);
Screenshots:
- First suggestion list shows OK.jpg
- Suggestion list for second entry is not showing.jpg
回答1:
As I was reading more and searching more, I found multiple-remote autocomplete code on the jquery ui website. Funny how you can search and read for a long time and not run across some obvious helpful information.
jquery ui website .. http://jqueryui.com/autocomplete/#multiple-remote
I used the example code below and edited it to suit my application.
It works now and solved my problem in my application.
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#birds" )
// 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( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
source: function( request, response ) {
$.getJSON( "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;
}
});
});
来源：https://stackoverflow.com/questions/19843854/comma-separated-multiple-autocomplete-in-one-field