jQueryUI的自动完成自定义数据，创建列表 [英] jqueryui autocomplete custom data, list creation
问题描述
我建立，其中第一场限制什么在第二可用，并且第二限制什么是在所述第三可用的形式。
我试图使用jQueryUI的自动完成这一点，但我遇到了一个问题。我已经尝试了一些其他来源的在线，但似乎无法得到它的服用。我是新来定制部件，这也许可以解释这个问题。
目前，我能够正确地发布和接收来自我的PHP文件中的数据（下面找到），但自动完成还没有显示它找到的信息。这些数据是存在的，我根本无法进入它在弹出的下拉列表中。
思考？
$（层级输入[类型=文本]）。自动完成（{
来源：函数（请求，响应）
{
变量$ form_data = $（'层次'）父母（'表'）序列化（）。
$阿贾克斯（{
网址：issue_autocomplete.php
键入：POST，
数据类型：JSON
数据：$ form_data，
成功：功能（数据）{
响应（$。图（数据，功能（项目）{
返回{
标签：item.tier1，
值：item.tier1
}
}））
}
}）; }，
的minLength：2
}）;
和php的（这是获取信息就好了）
$ tier1 = mysql_real_escape_string（$ _ POST ['tier1']）;
$层2 = mysql_real_escape_string（$ _ POST ['层2']）;
$层3 = mysql_real_escape_string（$ _ POST ['的Tier3']）;如果（$ tier1！=''）{
$查询=的mysql_query（SELECT * FROM varIssues WHERE tier1 LIKE'$ tier1％'）;
}如果（$层2！=''）{
$查询=的mysql_query（SELECT * FROM varIssues WHERE tier1 ='$ tier1'AND层2 LIKE'$层2％'）;
}如果（$层3！=''）{
$查询=的mysql_query（SELECT * FROM varIssues WHERE tier1 ='$ tier1'AND层2 ='$层2'AND的Tier3 LIKE'$的Tier3％'）;
}
//生成结果的数组
为（$ X = 0，$其行= mysql_num_rows（$查询）; $ X＆LT; $其行; $ X ++）{
$行= mysql_fetch_assoc（$查询）;
$问题[$ X] =阵列（'tier1'=＆GT; $行[tier1]，'层2'=＆GT; $行['层2']'的Tier3'=＆GT; $行['的Tier3'] ）;
} //回声JSON页
$响应= $ _GET [回调。 （。json_en code（$问题）。）;
回声$反应;
通过在响应的结束分号工作的？
$。阿贾克斯（{
网址：issue_autocomplete.php
键入：POST，
数据类型：JSON
数据：$ form_data，
成功：功能（数据）{
响应（$。图（数据，功能（项目）{
返回{
标签：item.term1，
值：item.term2
}
}））;
}
}）;
编辑：另一种方式来解析出可能的结果（假设你的声明对返回的数据是正确的 - 取消对警报（）下面肯定知道
功能autocompleteJSONParse code（数据）{
VAR行=新的Array（）;
VAR rowData = NULL;
对于（VAR I = 0，数据长度= data.length; I＆LT;数据长度;我++）{
rowData =数据[I]
//警报（rowData.term2 +：+ rowData.term1）; //取消注释，看数据，因为它解析
行[I] = {
值：rowData.term2，
标签：rowData.term1
};
} 返回行;
};
$（层级输入[类型=文本]）。自动完成（{
来源：函数（请求，响应）{
变量$ form_data = $（'层次'）父母（'表'）序列化（）。
$阿贾克斯（{
网址：issue_autocomplete.php
数据类型：JSON
键入：POST，
的contentType：应用/ JSON
数据：$ form_data，
成功：功能（数据）{
VAR行= autocompleteJSONParse code（数据）;
响应（行）;
}
}）;
}，
的minLength：2
}）;
I'm building a form where the first field restricts what's available in the second, and the second restricts what's available in the third.
I'm trying to use Jqueryui autocomplete for this, but am running into an issue. I've tried a number of other sources online but can't seem to get it to take. I am new to customizing widgets, which may explain the problem.
Currently, I am able to properly post and receive data from my php file (found below), but the autocomplete doesn't yet display the information it finds. The data is there, I am simply unable to get it into the pop-down list.
Thoughts?
$(".tiers input[type='text']").autocomplete({
source: function( request, response )
{
var $form_data=$('.tiers').parents('form').serialize();
$.ajax({
url: "issue_autocomplete.php",
type: "POST",
dataType: "json",
data:$form_data,
success: function(data){
response($.map( data, function(item){
return{
label:item.tier1,
value:item.tier1
}
}))
}
});
},
minLength: 2
});
And the php (which is retrieving information just fine)
$tier1=mysql_real_escape_string($_POST['tier1']);
$tier2=mysql_real_escape_string($_POST['tier2']);
$tier3=mysql_real_escape_string($_POST['tier3']);
if($tier1!=''){
$query = mysql_query("SELECT * FROM varIssues WHERE tier1 LIKE '$tier1%'");
}
if($tier2!=''){
$query = mysql_query("SELECT * FROM varIssues WHERE tier1='$tier1' AND tier2 LIKE '$tier2%'");
}
if($tier3!=''){
$query=mysql_query("SELECT * FROM varIssues WHERE tier1 = '$tier1' AND tier2 ='$tier2' AND tier3 LIKE '$tier3%'");
}
//build array of results
for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
$row = mysql_fetch_assoc($query);
$issues[$x] = array('tier1'=>$row["tier1"],'tier2'=>$row['tier2'],'tier3'=>$row['tier3']);
}
//echo JSON to page
$response = $_GET["callback"] . "(" . json_encode($issues) . ")";
echo $response;
With the semicolon at the end of the response does it work?
$.ajax({
url: "issue_autocomplete.php",
type: "POST",
dataType: "json",
data:$form_data,
success: function(data){
response($.map( data, function(item){
return{
label:item.term1,
value:item.term2
}
}));
}
});
Edit: another way to parse out the results perhaps (assumption your statement about the returned data IS correct - uncomment the alert() below to know for sure.
function autocompleteJSONParseCode(data) {
var rows = new Array();
var rowData = null;
for (var i = 0, dataLength = data.length; i < dataLength; i++) {
rowData = data[i];
// alert(rowData.term2+":"+rowData.term1);//uncomment to see data as it parses
rows[i] = {
value: rowData.term2,
label: rowData.term1
};
}
return rows;
};
$(".tiers input[type='text']").autocomplete({
source: function( request, response ) {
var $form_data=$('.tiers').parents('form').serialize();
$.ajax({
url: "issue_autocomplete.php",
dataType: "json",
type: "POST",
contentType: "application/json",
data:$form_data,
success: function(data) {
var rows = autocompleteJSONParseCode(data);
response(rows);
}
});
},
minLength: 2
});
这篇关于jQueryUI的自动完成自定义数据，创建列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
