javascript 如何使用 jQuery AutoComplete 在文本框中输入 json 值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21401753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to feed the json value in text box using jQuery AutoComplete?
提问by Kumar Shanmugam
I have the following value representation of an actual JSON object returned from my controller:
我有以下值表示从我的控制器返回的实际 JSON 对象：
script:
脚本：
<script type="text/javascript">
var customers = [{"name":"Urban Development","id":1},{"name":"Ball Corporation","id":2},{"name":"Apache Software Foundation","id":3},{"name":"The Coca-Cola Company","id":4},{"name":"Discovery Communications, Inc.","id":5},{"name":"Electronic Data Systems","id":6},{"name":"FreeWave Technologies, Inc.","id":7}] ;
$("#customer").autocomplete({ source: customers });
</script>
html:
html：
<label for="customer">Customer Name</label>
<input type="text" name="customer" id="customer" >
I dont know how to do this so any1 can help me.
我不知道该怎么做，所以 any1 可以帮助我。
UpdatedModel page
更新模型页面
public function getEmp(){
$db = Loader::db();
return $db->GetArray("select emp_id, emp_name as label, emp_name as value, emp_doj from employee_master");}
Controller page
控制器页面
$employee = employeeinfo::getEmp();
$this->set('employee', $employee);
view page script
查看页面脚本
$(function() {
var dataEmp = <?php echo json_encode($employee); ?>;
/* my json value like this
[
{"id": "2","label": "S Kumar ","value": "S Kumar ","emp_doj": "2013-07-02"},
{"id": "3","label": "Cj Ramki ","value": "Cj Ramki ","emp_doj": "2013-07-03"},
{"id": "4","label": "V Sudarsanam","value": "V Sudarsanam","emp_doj": "2011-06-06"},
{"id": "9","label": "S Kamal","value": "S Kamal", "emp_doj": "2013-07-17"},
{"id": "15","label": "R Malani","value": "R Malani","emp_doj": "2014-01-03"}
];*/
$( "#pAdminName" ).autocomplete({
source: dataEmp,
minLength: 1,
select: function( event, ui ) {
$( "#hd" ).val( ui.item.emp_id );
return false;
}
});
});
html
html
<?php echo $form->text('pAdminName',$pAdminName,array('placeholder'=>'Enter or select a name from list')) ?>
<input type="hidden" id="hd" name="hd" />
回答by aelor
I am adding another answer as this is a different approach than what was before
我正在添加另一个答案，因为这是一种与以前不同的方法
$("#field").autocomplete({
source: customers,
minLength: 1,
select: function(event, ui) {
$("#field_id").val(ui.item.id);
}
});
I have added a field to show the id , so that you can fetch it to do whatever manipulation you want to do.
我添加了一个字段来显示 id ，以便您可以获取它以执行您想做的任何操作。
here is the link to the fiddle
这是小提琴的链接
http://jsfiddle.net/DLLVw/137/
http://jsfiddle.net/DLLVw/137/
Updated answer on doubt
更新疑问解答
Are you sure the value of dataEmp is in the same format as I have mentioned in the fiddle. you can check it in firebug console.
您确定 dataEmp 的值与我在小提琴中提到的格式相同吗？您可以在萤火虫控制台中检查它。
I think your json array is coming in the format of {"name":"Urban Development","id":1}wheras it should be {"value":"Urban Development", "id":1}. Change name to value.
我认为您的 json 数组的格式{"name":"Urban Development","id":1}应该是{"value":"Urban Development", "id":1}. 将名称更改为值。
回答by user2481985
from my understanding autocomplete take two params, an array of objects with two properties value and data { value : "Urban Development", data : 1 } and a call back function
根据我的理解，自动完成需要两个参数，一个具有两个属性 value 和 data { value : "Urban Development", data : 1 } 的对象数组和一个回调函数
So you would need to parse your Json into this format first;
所以你需要先把你的 Json 解析成这种格式；
var json = JSON.parse(jsondata);
var autocomplete_data = [];
for(var prop in json){
autocomplete_data.push({ value : json[prop].name, data : json[prop].id });
}
$("#customer").autocomplete(autocomplete_data, function(){ this.value = "blah" });
回答by aelor
you can use jquery autocomplete in your case.
您可以在您的情况下使用 jquery 自动完成功能。
The trick here to do is to convert your json object into array of names so that your autocomplete works
这里要做的技巧是将您的 json 对象转换为名称数组，以便您的自动完成工作
like this :
像这样 ：
var newarr = [];
var customers = [{"name":"Urban Development","id":1},{"name":"Ball Corporation","id":2},{"name":"Apache Software Foundation","id":3},{"name":"The Coca-Cola Company","id":4},{"name":"Discovery Communications, Inc.","id":5},{"name":"Electronic Data Systems","id":6},{"name":"FreeWave Technologies, Inc.","id":7}] ;
for (i=0; i<customers.length; ++i) {
newarr.push(customers[i].name);
}
now your newarrhas the array necessary for doing the autocompletion. So you can just use the following code to get your thing done
现在您newarr拥有了进行自动完成所需的数组。所以你可以使用下面的代码来完成你的事情
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
var newarr = [];
var customers = [{"name":"Urban Development","id":1},{"name":"Ball Corporation","id":2},{"name":"Apache Software Foundation","id":3},{"name":"The Coca-Cola Company","id":4},{"name":"Discovery Communications, Inc.","id":5},{"name":"Electronic Data Systems","id":6},{"name":"FreeWave Technologies, Inc.","id":7}] ;
for (i=0; i<customers.length; ++i) {
newarr.push(customers[i].name);
}
$( "#tags" ).autocomplete({
source: newarr
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
as mentioned in the tutorial of jquery and a live demo also http://jqueryui.com/autocomplete/
正如 jquery 教程和现场演示中提到的，还有http://jqueryui.com/autocomplete/
Cheers !!
干杯！！
回答by heroin
You can try to use _renderItem method plus select callback:
您可以尝试使用 _renderItem 方法加上选择回调：
var customers = [{"name":"Urban Development","id":1},
{"name":"Ball Corporation","id":2},{"name":"Apache Software Foundation","id":3},
{"name":"The Coca-Cola Company","id":4},{"name":"Discovery Communications,Inc.","id":5},
{"name":"Electronic Data Systems","id":6},{"name":"FreeWave Technologies, Inc.","id":7}] ;
$("#customer").autocomplete({
source: customers,
select: function( event, ui ) {
$("#customer").val(ui.item.name);
return false;
}
}).data( "ui-autocomplete" ).
_renderItem = function( ul, item ) {
return $( "<li>" )
.attr( "data-value", item.id )
.append( $( "<a>" ).text( item.name ) )
.appendTo( ul );
};
