jqueryUi AutoVervollständigen - benutzerdefinierte Daten und display

Meine vollständige code ist hier: http://jsfiddle.net/HfNk9/13/

Ich bin auf der Suche zu diesem Beispiel jqueryUi AutoVervollständigen - benutzerdefinierte Daten und display.

Nehmen wir an, das Objekt der Projekte ist unterschiedlich, und es sieht wie folgt aus:

project = [
    {
        name: 'bar',
        value: 'foo',
        imgage: 'img.png'
    }
]

Wenn ich source = project die AutoVervollständigen-bezieht sich auf project.value und nicht project.name.

Wie soll ich dieses Verhalten ändern?

var autocomplete = function(element, data) {
    var fixtures = [
        {
        avatar: "http://www.placekitten.com/20/20",
        name: 'aaaaaaaaa',
        value: 'bbbbbbbbb'}
    ];

    element.autocomplete({
        minLength: 3,
        source: function(request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            response($.grep(fixtures, function(value) {
                return matcher.test(value.name);
            }));
        },
        create: function() {
            console.log(fixtures)
            element.val(fixtures.name);
        },
        focus: function(event, ui) {
            element.val(ui.item.name);
            return false;
        },
        select: function(event, ui) {
            element.val(ui.item.name);
            return false;
        }
    }).data('autocomplete')._renderItem = function(ul, item) {
        return $('<li></li>')
            .data('item.autocomplete', item)
            .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>')
            .appendTo(ul);
    };
};

autocomplete($('#auto'));

Mein vollständiger code: http://jsfiddle.net/HfNk9/13/

InformationsquelleAutor Lorraine Bernard | 2012-07-05
  1. 11

    Müssen Sie filter auf eine andere Eigenschaft als die autocomplete-widget sucht standardmäßig aktiviert (wie Ihnen sicher aufgefallen, dass es name oder value bei der Verwendung eines Quell-array mit Objekten).

    Können Sie eine Funktion verwenden, anstatt ein array als Quelle und führen Sie Ihre eigenen Filter, die Art und Weise:

    element.autocomplete({
    minLength: 3,
    source: function(request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(fixtures, function(value) {
            return matcher.test(value.name);
        }));
    },
    create: function() {
        console.log(fixtures)
        element.val(fixtures.name);
    },
    focus: function(event, ui) {
        element.val(ui.item.name);
        return false;
    },
    select: function(event, ui) {
        element.val(ui.item.name);
        return false;
    }
}).data('autocomplete')._renderItem = function(ul, item) {
    return $('<li></li>')
        .data('item.autocomplete', item)
        .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>')
        .appendTo(ul);
};

    Beispiel: http://jsfiddle.net/QzJzW/

    • +1 Große Erklärung. ich danke Ihnen sehr.
    • Eine andere Sache, die "a" - Tags in der render ist notwendig, ohne es Dinge wie Fokus-Methode oder andere wird scheitern (keine Benutzeroberfläche.Element set).
    • schön gemacht, sir.
    InformationsquelleAutor Andrew Whitaker
  2. 0

    Sollten Sie die select Eigenschaft:

    $("...").autocomplete({
    source: ...,
    select: function( event, ui ) { //when an item is selected
        //use the ui.item object
        alert(ui.item.name)
        return false;
    }
});
    • Danke, habe ich versucht, aber es funktioniert nicht. Ich habe meine vollständigen code.
    • hier ist mein jsfiddle.net/HfNk9/13
    InformationsquelleAutor EyalAr
  3. 0

    Die Antwort ist in den source-code der Seite, die du gelinkt hast. Wenn Sie möchten, verwenden Sie den Wert name statt value dann würden Sie so etwas tun:

    $( "#input" ).autocomplete({
    minLength: 0,
    source: projects,
    focus: function( event, ui ) {
        $( "#input" ).val( ui.item.value );
        return false;
    },
    select: function( event, ui ) {
        $( "#input" ).val( ui.item.value );
        return false;
    }
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.name + "</a>" )
        .appendTo( ul );
};
    • Danke, habe ich versucht, aber es funktioniert nicht. Ich habe meine vollständigen code.
    • hier ist mein jsfiddle.net/HfNk9/13
    InformationsquelleAutor White Elephant
Schreibe einen Kommentar