it-swarm.com.de

jQuery UI-Autovervollständigung mit Element und ID

Ich habe das folgende Skript, das mit einem eindimensionalen Array arbeitet. Ist es möglich, dies mit einem zweidimensionalen Array zu bearbeiten? Welches Element auch ausgewählt wird, indem Sie auf eine zweite Schaltfläche auf der Seite klicken, sollte die ID des ausgewählten Elements angezeigt werden.

Dies ist das Skript mit dem 1-dimensionalen Array:

var $local_source = ["c++", "Java", "php", "coldfusion", "javascript", "asp", "Ruby"];
$("#txtAllowSearch").autocomplete({
    source: $local_source
});

Dies ist das Skript für die Schaltfläche zum Überprüfen der unvollständigen ID:

$('#button').click(function() {
    // alert($("#txtAllowSearch").someone_get_id_of_selected_item);
});
50
oshirowanen

Sie müssen die Eigenschaften ui.item.label (der Text) und ui.item.value (die ID) verwenden

$('#selector').autocomplete({
    source: url,
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input
    }
});

$('#button').click(function() {
    alert($("#txtAllowSearchID").val()); // get the id from the hidden input
}); 

[Bearbeiten] Sie haben auch gefragt, wie Sie das mehrdimensionale Array erstellen ...

Sie sollten das Array so erstellen können:

var $local_source = [[0,"c++"], [1,"Java"], [2,"php"], [3,"coldfusion"], 
                     [4,"javascript"], [5,"asp"], [6,"Ruby"]];

Weitere Informationen zum Arbeiten mit mehrdimensionalen Arrays finden Sie hier: http://www.javascriptkit.com/javatutors/literal-notation2.shtml

71
JK.

Auf der Registerkarte "Übersicht" des Autokomplettierungs-Plugins von jQuery:

Die lokalen Daten können ein einfaches Array sein von Strings oder enthält Objekte für jedes Element im Array, entweder mit einem Label- oder Value-Eigenschaft oder beides. Das Die label-Eigenschaft wird in der .__ angezeigt. Vorschlagsmenü. Der Wert lautet wird nach .__ in das Eingabeelement eingefügt. der Benutzer hat etwas aus .__ ausgewählt. Speisekarte. Wenn nur eine Eigenschaft .__ ist. angegeben, wird es für beide verwendet. z.B. wenn Sie nur .__ angeben. value-properties, der Wert wird auch als Etikett verwendet werden.

So könnte Ihr "zweidimensionales" Array aussehen:

var $local_source = [{
    value: 1,
    label: "c++"
}, {
    value: 2,
    label: "Java"
}, {
    value: 3,
    label: "php"
}, {
    value: 4,
    label: "coldfusion"
}, {
    value: 5,
    label: "javascript"
}, {
    value: 6,
    label: "asp"
}, {
    value: 7,
    label: "Ruby"
}];

Sie können auf die Label- und Werteigenschaften innerhalb des focus und select -Ereignisses über das Argument ui zugreifen, indem Sie ui.item.label und ui.item.value verwenden.

Bearbeiten

Anscheinend müssen Sie den Fokus "abbrechen" und Ereignisse auswählen, damit die ID-Nummern nicht in die Textfelder eingefügt werden. Dabei können Sie stattdessen den Wert in eine versteckte Variable kopieren. Hier ist ein Beispiel .

34
Salman A

Mein Code funktionierte nur, wenn ich der select-Funktion "return false" hinzugefügt habe. Andernfalls wurde der Eingang innerhalb der select-Funktion auf den richtigen Wert gesetzt und nach dem Ende der select-Funktion auf den Wert id gesetzt. Das return false hat dieses Problem gelöst.

$('#sistema_select').autocomplete({

    minLength: 3,
    source: <?php echo $lista_sistemas;?> ,
    select: function (event, ui) {
         $('#sistema_select').val(ui.item.label); // display the selected text
         $('#sistema_select_id').val(ui.item.value); // save selected id to hidden input
         return false;
     },
    change: function( event, ui ) {
        $( "#sistema_select_id" ).val( ui.item? ui.item.value : 0 );
    } 
});

Außerdem habe ich dem Änderungsereignis eine Funktion hinzugefügt. Wenn der Benutzer etwas in die Eingabe schreibt oder einen Teil der Artikelbezeichnung löscht, nachdem ein Element ausgewählt wurde, muss ich das ausgeblendete Feld aktualisieren, damit ich keine falsche (veraltete) ID Wenn zum Beispiel meine Quelle ist:

var $local_source = [
       {value: 1,  label: "c++"}, 
       {value: 2,  label: "Java"}]

und der Benutzer gibt ja ein und wählt mit der Autovervollständigung die Option 'Java'. Ich speichere den Wert 2 im ausgeblendeten Feld. Wenn der Benutzer einen Buchstaben aus 'Java' löscht, zum Beispiel mit 'jva' im Eingabefeld, kann ich die ID 2 nicht an meinen Code übergeben, da der Benutzer den Wert geändert hat. In diesem Fall setze ich die ID auf 0.

10
Paty Lustosa

Ich möchte nur teilen, was an meinem Ende funktioniert hat, falls es auch jemand anderem helfen könnte. Auf der Grundlage der obigen Antwort von Paty Lustosa gestatten Sie mir bitte, einen weiteren Ansatz hinzuzufügen, der von dieser Website abgeleitet wurde, wobei er einen Ajax-Ansatz für die Quellmethode verwendet hat

http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3

Der Kicker ist das resultierende "String" - oder Json-Format aus Ihrem PHP-Skript (Listing.php unten), das die Ergebnismenge ableitet, die im Autocomplete-Feld angezeigt werden soll.

    {"list":[
     {"value": 1, "label": "abc"},
     {"value": 2, "label": "def"},
     {"value": 3, "label": "ghi"}
    ]}

Dann zum Quellteil der Autocomplete-Methode:

    source: function(request, response) {
        $.getJSON("listing.php", {
            term: request.term
        }, function(data) {                     
            var array = data.error ? [] : $.map(data.list, function(m) {
                return {
                    label: m.label,
                    value: m.value
                };
            });
            response(array);
        });
    },
    select: function (event, ui) {
        $("#autocomplete_field").val(ui.item.label); // display the selected text
        $("#field_id").val(ui.item.value); // save selected id to hidden input
        return false;
    }

Ich hoffe, das hilft ... alles Gute!

7
<script type="text/javascript">
$(function () {
    $("#MyTextBox").autocomplete({
        source: "MyDataFactory.ashx",
        minLength: 2,
        select: function (event, ui) {
            $('#MyIdTextBox').val(ui.item.id);
            return ui.item.label;
        }
    });
});

Die obigen Antworten haben jedoch geholfen, aber in meiner Implementierung nicht funktioniert. Da ich den Wert nicht mit jQuery gesetzt habe, gebe ich den Wert von der Funktion an die Option select zurück.

Die Seite MyDataFactory.ashx verfügt über eine Klasse mit drei Eigenschaften ID, Label, Value.

Übergeben Sie die Liste an den JavaScript-Serialisierer und geben Sie die Antwort zurück.

3
Eric Rohlfs

Angenommen, die Objekte in Ihrem Quell-Array haben eine ID-Eigenschaft ...

var $local_source = [
    { id: 1, value: "c++" },
    { id: 2, value: "Java" },
    { id: 3, value: "php" },
    { id: 4, value: "coldfusion" },
    { id: 5, value: "javascript" },
    { id: 6, value: "asp" },
    { id: 7, value: "Ruby" }];

Wenn Sie die aktuelle Instanz abrufen und die Eigenschaft selectedItem überprüfen, können Sie die Eigenschaften des aktuell ausgewählten Elements abrufen. In diesem Fall wird die ID des ausgewählten Elements angezeigt.

$('#button').click(function() {
    alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});
3
Nattrass

Ich denke nicht, dass es notwendig ist, die Werte- und Beschriftungseigenschaften zu hacken, versteckte Eingabefelder zu verwenden oder Ereignisse zu unterdrücken. Sie können jedem Autocomplete-Objekt eine eigene benutzerdefinierte Eigenschaft hinzufügen und diesen Eigenschaftswert später lesen.

Hier ist ein Beispiel.

$(#yourInputTextBox).autocomplete({
    source: function(request, response) {
        // Do something with request.term (what was keyed in by the user).
        // It could be an AJAX call or some search from local data.
        // To keep this part short, I will do some search from local data.
        // Let's assume we get some results immediately, where
        // results is an array containing objects with some id and name.
        var results = yourSearchClass.search(request.term);

        // Populate the array that will be passed to the response callback.
        var autocompleteObjects = [];
        for (var i = 0; i < results.length; i++) {
            var object = {
                // Used by jQuery Autocomplete to show
                // autocomplete suggestions as well as
                // the text in yourInputTextBox upon selection.
                // Assign them to a value that you want the user to see.
                value: results[i].name;
                label: results[i].name;

                // Put our own custom id here.
                // If you want to, you can even put the result object.
                id: results[i].id;
            };

            autocompleteObjects.Push(object);
        }

        // Invoke the response callback.
        response(autocompleteObjects);
    },
    select: function(event, ui) {
        // Retrieve your id here and do something with it.
        console.log(ui.item.id);
    }
});

Die Dokumentation Erwähnungen müssen Sie in einem Array von Objekten mit Beschriftungs- und Werteigenschaften übergeben. Sie können jedoch sicherlich Objekte mit more als diesen beiden Eigenschaften übergeben und später lesen.

Hier ist der relevante Teil, auf den ich mich beziehe.

Array: Ein Array kann für lokale Daten verwendet werden. Es werden zwei unterstützt Formate: Ein Array von Strings: ["Choice1", "Choice2"] Ein Array von Objekte mit Label- und Werteigenschaften: [{label: "Choice1", Wert: "value1"}, ...] Die Label-Eigenschaft wird im Vorschlag angezeigt Speisekarte. Der Wert wird in das Eingabeelement eingefügt, wenn ein Benutzer wählt einen Artikel aus. Wenn nur eine Eigenschaft angegeben ist, wird sie verwendet Wenn Sie beispielsweise nur Werteigenschaften angeben, wird der Wert auch als Etikett verwendet werden.

2
Kevin Lee

Zum Schluss habe ich es gemacht. Vielen Dank, vielen Freunden und einem besonderen Dank an Herrn https://stackoverflow.com/users/87015/salman-a aufgrund seines Codes konnte ich es richtig lösen. Endlich sieht mein Code so aus, da ich groovige Grals benutze. Ich hoffe, dass dies jemandem helfen wird. Vielen Dank 

hTML-Code sieht auf meiner Gsp-Seite folgendermaßen aus

  <input id="populate-dropdown" name="nameofClient" type="text">
  <input id="wilhaveid" name="idofclient" type="text">

die script-Funktion ist in meiner gsp-Seite so

  <script>
        $( "#populate-dropdown").on('input', function() {
            $.ajax({
                url:'autoCOmp',
                data: {inputField: $("#populate-dropdown").val()},
                success: function(resp){
                    $('#populate-dropdown').autocomplete({
                        source:resp,
                        select: function (event, ui) {
                            $("#populate-dropdown").val(ui.item.label);
                            $("#wilhaveid").val(ui.item.value);
                             return false;
                        }
                    })
                }
            });
        });
    </script>

Und mein Controller-Code ist so

   def autoCOmp(){
    println(params)
    def c = Client.createCriteria()
    def results = c.list {
        like("nameOfClient", params.inputField+"%")
    }

    def itemList = []
    results.each{
        itemList  << [value:it.id,label:it.nameOfClient]
    }
    println(itemList)
    render itemList as JSON
}

Eine weitere Sache habe ich nicht gesetzt ID-Feld versteckt, weil ich zuerst überprüft, dass ich die genaue ID bekomme, können Sie es versteckt halten, nur Typ = versteckt anstelle von Text für das zweite Eingabeelement in HTML

Vielen Dank !

2
Aadil Masavir

Dies kann ohne die Verwendung von ausgeblendeten Feldern erfolgen. Sie müssen die JQuerys-Fähigkeit nutzen, um zur Laufzeit benutzerdefinierte Attribute zu erstellen. 

('#selector').autocomplete({
    source: url,
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input
    }
});

$('#button').click(function() {
    alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input
}); 
2
Waris Ali

Auto Complete Textfeldbindung mit Jquery

  ## HTML Code For Text Box and For Handling UserID use Hidden value ##
  <div class="ui-widget">
@Html.TextBox("userName")  
    @Html.Hidden("userId")
    </div>

Unten Bibliothek ist erforderlich

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

JQuery-Skript

$("#userName").autocomplete(
{

    source: function (request,responce)
    {
        debugger
        var Name = $("#userName").val();

        $.ajax({
            url: "/Dashboard/UserNames",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                Name: Name

            }),
            dataType: 'json',
            success: function (data) {
                debugger
                responce(data);
            },
            error: function (err) {
                alert(err);
            }
        });
    },
    select: function (event, ui) {

        $("#userName").val(ui.item.label); // display the selected text
        $("#userId").val(ui.item.value); // save selected id to hidden input
        return false;
    }
})

Rückgabedaten sollten unter dem Format liegen


 label = u.person_full_name,
 value = u.user_id
1
Hari Lakkakula

Ich habe versucht, ob Code (Wert oder ID) in Textfeld von Label-Text angezeigt wird. Danach habe ich event.preventDefault () ausprobiert, es funktioniert perfekt ... 

var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}]

$(".jquery-autocomplete").autocomplete({
    source: e,select: function( event, ui ) {
        event.preventDefault();
        $('.jquery-autocomplete').val(ui.item.label);
        console.log(ui.item.label);
        console.log(ui.item.value);
    }
});
1
HIR