Bootstrap typeahead: zeigen verschiedene Text in Feld einmal

habe ich mit Bootstrap-typeahead wie folgt suchen bin mit:Bootstrap typeahead: zeigen verschiedene Text in Feld einmal

$('.lookup').typeahead({ 

source: function (query, process) { 
    return $.getJSON(
     'json_autocomplete.php',{ query: query }, 
     function (data) { 

      var newData = []; 
       $.each(data, function(){ 

        newData.push(this.label); 
        //populate hidden field with id 
        $('#contact_id').val(this.id); 

       }); 

      return process(newData); 

     }); 
} 

});

Die JSON-Daten wie folgt aussieht:

[{"label":"Contact: Jeff Busch-> Busch, Jeff: 1975-11-24","value":"Busch, Jeff","id":"2096"}, ...

Es ist großartig funktioniert. Wenn der Benutzer mit der Eingabe beginnt, werden die "Label" -Daten in einer Liste unter der Eingabe angezeigt. Sobald der Benutzer jedoch auf eines der Listenelemente klickt, möchte ich, dass der Text "Wert" im Eingabetextfeld angezeigt wird und nicht alle Labelinformationen, nach denen gesucht wurde!

Ist das möglich?

Hier ist eine Geige: Es ist der genaue gleiche gute alte Bootstrap-2.x-typeahead

http://jsfiddle.net/michels287/qdgo651h/

Quelle

2016-03-31 chris.cavage

Wie sieht Ihre html aussehen? Ist das das einzige Skript? Vielleicht ein Kinderspiel? – whipdancer

Ich entschuldige mich. Ich habe eine Geige zum Vorführen geschaffen. Ich mag es, wie die 'Label'-Info im Downdown als TypeAhead angezeigt wird, aber sobald ein Element ausgewählt ist, möchte ich nur die' Value'-Info haben, die in der Eingabe erscheint. Ich aktualisierte meine ursprüngliche Frage mit einer Geige, die hoffentlich helfen wird. –

Ich werde dir stark zu https://github.com/bassjobsen/Bootstrap-3-Typeahead Upgrade empfehlen, nur in einem eigenen Repository gepflegt und bugfixed seit Bootstrap 3.0 übersprang der Typeahead zugunsten typeahead.js (welches BTW überhaupt nicht mehr gepflegt wird). Dies wird das Leben für Sie viel einfacher machen.

Danach Sie alle Verrenkungen überspringen und einfach tun:

$('#contact').typeahead({ 
    source: jsonData, 
    displayText: function(item) { 
    return item.label 
    }, 
    afterSelect: function(item) { 
    this.$element[0].value = item.value 
    } 
})

aktualisiert Geige ->http://jsfiddle.net/qdgo651h/1/

pro Kommentar aktualisiert. Ich glaube, Sie verkomplizieren die source Teil

$('.lookup').typeahead({ 
    displayText: function(item) { 
     return item.label 
    }, 
    afterSelect: function(item) { 
     this.$element[0].value = item.value 
    }, 
    source: function (query, process) { 
    return $.getJSON('json_autocomplete.php', { query: query }, function(data) { 
     process(data) 
    }) 
    } 
})

sollte es tun. Aktualisiert Geige aus dem Kommentar unten ->http://jsfiddle.net/hwbnhbdd/1/ Sie können http://myjson.com/ als AJAX-Quelle in Geigen wie im Update verwenden.

Quelle

2016-04-01 09:47:48 davidkonrad

Danke. Ich versuche, deinen Code an mein Projekt anzupassen. Ich habe diese Geige zum Beispiel gemacht. Allerdings erhalte ich meine Daten per Fernzugriff mit AJAX und gebe die Informationen als JSON zurück. Ich weiß nicht, wie man das mit Ajax in Geige nachbildet, aber ich zeige dir in dieser neuen Geige den Code, den ich benutze. Wenn Sie es betrachten, nehmen Sie bitte an, dass die JSON-Daten an der Spitze sind, was der Ajax-Aufruf zurückgibt. Ich habe auch die Referenzen auf Bootstrap typeahead 3 für Ihre Anfrage aktualisiert. Wie kann ich mit meiner Ajax-Anfrage dasselbe in deiner Geige erreichen? http://jsfiddle.net/michels287/hwbnhbdd/ –

@ chris.cavage, OK - siehe Update. – davidkonrad

Ja, ich habe das kompliziert! Was für eine Hilfe! Ich danke dir sehr! –

zurückkehren Sie einfach die Daten auf dem Aktualisierungsereignis wie folgt aus:

updater: function (item) { 
     $('#id').val(map[item].id); 

     //Here we return the text to display on the input control 
     return map[item].autocomplete; 
    },

Quelle

2017-03-18 10:30:41 Nickholas

Bootstrap typeahead: zeigen verschiedene Text in Feld einmal

Antwort

Verwandte Themen