javascript - 如何使用 jQuery AutoComplete 在文本框中输入 json 值?

标签 javascript jquery json jquery-autocomplete

我有以下从我的 Controller 返回的实际 JSON 对象的值表示:

脚本:

<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:

<label for="customer">Customer Name</label>
<input type="text" name="customer" id="customer" >

我不知道该怎么做所以任何人都可以帮助我。

已更新 模型页面

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 页面

$employee = employeeinfo::getEmp();
$this->set('employee', $employee);

查看页面 脚本

$(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

<?php echo $form->text('pAdminName',$pAdminName,array('placeholder'=>'Enter or select a name from list')) ?>
<input type="hidden" id="hd" name="hd" />

最佳答案

我正在添加另一个答案,因为这是一种与之前不同的方法

   $("#field").autocomplete({
        source: customers,
        minLength: 1,
        select: function(event, ui) {
            $("#field_id").val(ui.item.id);
        }
    });

我添加了一个字段来显示 id ,这样你就可以获取它来做你想做的任何操作。

这是 fiddle 的链接

http://jsfiddle.net/DLLVw/137/

更新了对疑问的回答

您确定 dataEmp 的值与我在 fiddle 中提到的格式相同吗?你可以在 Firebug 控制台检查它。

我认为您的 json 数组格式为 {"name":"Urban Development","id":1} 而它应该是 {"value":"城市发展", "id":1}.将名称更改为值。

关于javascript - 如何使用 jQuery AutoComplete 在文本框中输入 json 值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21401753/

相关文章:

javascript - 在 IE8 中 : Create a custom event in vanilla JS and pick it up in Jquery

javascript - 如何防止从outerHTML/innerHTML 中删除双引号?

javascript - 出现水平滚动条时始终将 <p> 文本换行到窗口

javascript - 一段时间后更改线性渐变背景

php - 将字符串化的 json 结构转换为 PHP 数组

json - 是否可以让 Jackson 将嵌套对象序列化为字符串

javascript - 如何解决createSelector方法 Uncaught Error ?

javascript - 访问子域中的 cookie

jquery - 如何仅在具有多个元素的div中隐藏文本JQUERY

javascript - 在 ng-repeat 中显示嵌套 json