Wie füttern Sie die json-Wert in der text-box mit jQuery-AutoComplete?

Habe ich den folgenden Wert Darstellung einer tatsächlichen JSON-Objekt zurückgegeben von meinem controller:

Skript:

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

Ich weiß nicht, wie Sie dies tun, so any1 mir helfen kann.

Aktualisiert
Modell Seite

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 Seite

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

Seite anzeigen
Skript

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

InformationsquelleAutor Kumar Shanmugam | 2014-01-28

2

Ich bin das hinzufügen einer anderen Lösung, dies ist ein anderer Ansatz als das, was war, bevor
```
   $("#field").autocomplete({
        source: customers,
        minLength: 1,
        select: function(event, ui) {
            $("#field_id").val(ui.item.id);
        }
    });
```
Ich habe ein Feld, um die id zu zeigen , so dass Sie abholen können, es zu tun, was manipulation, die Sie tun möchten.

hier ist der link zu der fiddle

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

Aktualisierte Antwort auf die Zweifel

Sind Sie sicher, dass der Wert von dataEmp ist im gleichen format wie ich erwähnt habe, in der Geige. Sie können es in der firebug-Konsole.

Ich denke, dass deine json-array kommt im format {"name":"Urban Development","id":1} während es sein sollte {"value":"Urban Development", "id":1}. Name ändern in Wert.

Hi ich habe ein problem Textfeld wird nicht angezeigt in der Liste und ich bin mit json-Wert.
haben Sie enthalten die css ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/... "Datei" auf der Oberseite ?
Nein, jetzt habe ich ein anderes problem. wenn ich mit der Maus zu wählen Sie den Namen in der Liste nicht ausgewählt. darf ich wissen, warum?
können Sie veröffentlichen Sie Ihren code Kumar ?
lassen Sie uns weiter, diese Diskussion im chat

InformationsquelleAutor aelor
0

aus meinem Verständnis AutoVervollständigen nimmt zwei Parameter, ein array von Objekten mit zwei Eigenschaften Wert und die Daten { value : "Stadtentwicklung", data : 1 } und ein call-back-Funktion

So würden Sie brauchen, um zu analysieren, Ihre Json-in diesem format erste;
```
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" });
```
vielen Dank für die Mühe, aber seine Arbeit nicht.
Sie hätte hinzufügen müssen, die Ihre eigene Logik in Kap.value = "bla" isnt gehen, etwas zu tun, jetzt ist es. Sie würden sicherstellen müssen, dass die autocomplete_data array in dem format, das Sie benötigen. console.log(autocomplete_data); und dass die callback-Funktion ist etwas wie prepopulating der input-Wert mit dem, was Sie wollen. Kippe alles für Sie tun, es sei denn, Sie möchten, um mich zu bezahlen 😉
Ich bin mir nicht erwarten, dass alle diejenigen von Ihnen.. zur gleichen Zeit, ich bin nicht vertraut mit jquery... vielen Dank für Ihre Antwort

InformationsquelleAutor user2481985

können Sie jquery autocomplete in Ihrem Fall.

Den trick hier zu tun ist, konvertieren Sie Ihre json-Objekt in ein array von Namen, so dass Sie Ihre AutoVervollständigen funktioniert

wie diese :

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

nun Ihre newarr hat das array notwendig für die Durchführung der Vervollständigung. So können Sie einfach den folgenden code verwenden, um Ihre Sache getan

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

wie gesagt in dem tutorial von jquery und eine live-demo auch http://jqueryui.com/autocomplete/

Prost !!

Ja, seine Arbeit als AutoVervollständigen, aber wie man entsprechende id.

InformationsquelleAutor aelor

Können Sie versuchen, zu verwenden _renderItem Methode plus wählen Sie callback:

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

Ich habe versucht den gleichen code in form von jquery-ui haben, aber seine Arbeit nicht zu meiner json-Wert
Haben Sie ein javascript-Fehler? Können Sie bitte schauen Sie in die Konsole?
danke für den Hinweis, ich werde versuchen

InformationsquelleAutor heroin

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.