逗号分隔的多个自动完成功能在一个领域 [英] Comma Separated Multiple Autocomplete in one field
问题描述
我试图适应以下code到我的应用程序。
多个自动完成的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?
下面是我的code ...
Below is my code...
我的格式如下：
<!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
- 对于第二个入口建议名单并不showing.jpg
推荐答案
当我阅读越来越多搜索，我发现jQuery UI的网站上有多个远程自动完成code。滑稽如何可以搜索和阅读很长一段时间，而不是遇到了一些明显的有用的信息运行。
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
我用下面的例子中code和编辑它来满足我的应用程序。
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;
}
});
});
这篇关于逗号分隔的多个自动完成功能在一个领域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
