逗号分隔的多个自动完成在一个字段中
我正在尝试使以下代码适应我的应用程序.Multiple Autocomplete jsfiddle jsfiddle 有效——我的 PHP 应用程序无效.
I am trying to adapt the following code to my application. Multiple Autocomplete jsfiddle The jsfiddle works -- my PHP application doesn't.
我的应用程序是一个基于 PHP 的 Xataface 应用程序，我添加了一个自定义移动创建页面.我想从mysql获取建议列表.
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?
下面是我的代码...
我的表格如下:
<!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>
我的tags.php文件如下..
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);
截图:
- 第一个建议列表显示 OK.jpg
- 第二个条目的建议列表未显示.jpg
推荐答案
随着阅读量的增加和搜索量的增加，我在jquery ui 网站上发现了多远程自动补全代码.有趣的是，您可以长时间搜索和阅读，而不会遇到一些明显有用的信息.
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 网站 .. 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;
}
});
});
相关文章