Wie man JQuery UI Autocomplete arbeiten mit der Element-id

Habe ich diesen post hier: jQuery UI-autocomplete mit Position und id aber ich war nicht in der Lage, Dinge herauszufinden.

hier ist mein input html:

<input type="text" class="tags" style="width:250px; height:24px;"> </input>' 
<input type="hidden" name="tags_id" id="tags_id" />

hier ist mein ajax-Aufruf:

var data = {};
$.get('/tags',data, function(tag_list) {
                autocomplete_source_list = [];

                for(var i = 0; i < tag_list.length; i++){
                    autocomplete_source_list.push([tag_list[i].fields.display_name, [2,3,4,5,6,7,8,9,1,2]]);
                }
                jQuery( ".tags" ).autocomplete({
                    source: autocomplete_source_list,
                    select: function (event, ui) {
                        $(".tags").val(ui.item.label); //display the selected text
                        $(".tags_id").val(ui.item.value); //save selected id to hidden input
                        console.log("selected id: ", ui.item.label)
                    }
                });

            });

Wie richte ich das ids sollte ich passiere ein 2d-array zu Quelle? wenn ich die Quelle zu sein, nur der text wird dann sowohl die Benutzeroberfläche.Element.Wert = ui.Element.label = "text". Ich weiß nicht, wie id ' s angehängt werden kann.

Bekomme ich etwas Hilfe bitte. Dank

InformationsquelleAutor Saher Ahwal | 2012-01-28

  1. 4

    Aus der Handbuch:

    Den lokalen Daten kann ein einfaches Array von Strings oder es enthält Objekte für jedes Element im array ist, mit der entweder ein label oder eine value-Eigenschaft, oder beides. Die label-Eigenschaft wird angezeigt im Menü "Vorschlag". Der Wert, der eingefügt wird, in dem input-element nach dem ausgewählten Benutzer etwas aus dem Menü.

    Also die label geht in der drop-down-Menü und die value geht in die <input type="text"> und Sie wollen etwas ein wenig anders, Sie wollen eine Sache, die in der <input type="text"> - und Menü-und eine andere Sache, die in einem separaten <input type="hidden">.

    Angenommen, Sie haben einige raw-Daten, wie Sie diese wieder von Ihrem server:

    var raw = [
    { value: 1, label: 'one'   },
    { value: 2, label: 'two'   },
    { value: 3, label: 'three' },
    { value: 4, label: 'four'  }
];

    Dann könnten Sie bauen ein array und eine einfache Zuordnung-Objekt:

    var source  = [ ];
var mapping = { };
for(var i = 0; i < raw.length; ++i) {
    source.push(raw[i].label);
    mapping[raw[i].label] = raw[i].value;
}

    Den source array gegeben würde .autocomplete() und Ihre select handler verwenden würde mapping um herauszufinden, was in dem <input type="hidden">:

    $('.tags').autocomplete({
    source: source,
    select: function(event, ui) {
        $('.tags_id').val(mapping[ui.item.value]);
    }
});

    Demo: http://jsfiddle.net/ambiguous/GVPPy/

    InformationsquelleAutor mu is too short

  2. 2

    Brauchen Sie nicht eine Zuordnung. Sie können benutzerdefinierte Attribute zu den Objekten im Quell-array. Die Attribute "Bezeichnung" und "Wert" sind vorbehalten. Dann die benutzerdefinierten Attribute wie "id" zugegriffen werden kann durch ui.Element.id in dem event-handler.

    $("#input_id").autocomplete({
  source:function(request, response){
    $.ajax({
        url: "/api/autocomplete",
        type: "POST",
        dataType: "json",
        data: { term: request.term },
        success: function(responseData){
            var array = responseData.map(function(element) {
                return {value: element['name'], id: element['id']};
            });
            response(array);
        }
    })
  select: function(event, ui) {
      var name = ui.item.value;
      var id = ui.item.id;
      ...

    InformationsquelleAutor kimkunjj

  3. 0

    Versuchen Sie Dies :

    Autocomplete-Funktion :

     $(function() {            

    $( "#firm_name" ).autocomplete({       
           source:'/autocomplete_firm_name',   //url

            select: function( event, ui ) {
                //  Where to used
                     $( "#firm-name" ).val( ui.item.value );
                     $( "#firm-id" ).val( ui.item.id );                      
                    return false;
                 } 
    });   //autocomplete
});     //function

    Code in PHP-Skript (autocomplete_firm_name) :

    public function autocomplete_firm_name() {

 extract($_GET);  
        //$term variable contend your serach value
      //Execute your sql query here       

     $datas=array();
         if($query->num_rows() > 0 ){
           foreach ($query->result() as $row)
            {
               $data=array();
                      $data['id']=$row->firm_id;
                       $data['label']=$row->firm_name;
                      $data['value']=$row->firm_name;
                         $datas[]=$data;
            }
           }

            echo  json_encode($datas);

    }

    InformationsquelleAutor Satish

Schreibe einen Kommentar