Question

我有从控制器返回的实际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" >

我不知道怎么做，所以any1可以帮助我。

更新型号页面

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");}

控制器页面

$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" />

Answer 1

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

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

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

这里是小提琴的链接

<强> http://jsfiddle.net/DLLVw/137/

更新了有疑问的答案

您确定dataEmp的值与我在小提琴中提到的格式相同。你可以在firebug控制台中查看它。

我认为你的json数组的格式为{"name":"Urban Development","id":1}，它应该是{"value":"Urban Development", "id":1}。将名称更改为值。

Answer 2

从我的理解中自动完成需要两个参数，一个具有两个属性值和数据的对象数组{value：“Urban Development”，数据：1}和一个回调函数

所以你需要先将你的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" });

Answer 3

你可以在你的情况下使用jquery自动完成。

这里要做的就是将你的json对象转换为名字数组，以便自动完成工作

像这样：

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);
}

现在你的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>

正如jquery教程和现场演示中提到的http://jqueryui.com/autocomplete/

干杯!!

Answer 4

您可以尝试使用_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 );
        };

如何使用jQuery AutoComplete在文本框中提供json值？

4 个答案: