JQuery autocomplete-Niestandardowy html dla listy wyników

Mam na myśli ten plugin: http://jqueryui.com/demos/autocomplete/

Więc pierwotna struktura wyników to 

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul>

Muszę zrobić linki w środku, aby wyglądały mniej więcej tak: 

<a class="myclass" customattribute="something"> The item </a>

Proszę nie mów mi, że jedynym rozwiązaniem jest edycja wtyczki, ponieważ nie chcę tego samego formatu dla wszystkich autouzupełniania na stronie.

Author: Tshepang, 2011-10-13
Source

3 answers

Należy zastąpić metodę _renderItem (dla danego autouzupełniania): 

$("selector").autocomplete({ ... })
   .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a class='myclass' customattribute='" + item.customattribute + "'>" + item.label + "</a>" )
            .appendTo( ul );
   };

(zakładając, że items w twoim source masz właściwość o nazwie customattribute)

Jak pokazano w tym przykładzie: http://jqueryui.com/demos/autocomplete/#custom-data

 40
Author: Andrew Whitaker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-12 21:18:59

Jest to również udokumentowane w dokumentacji jQuery-UI autocomplete pod adresem: Jquery-autocomplete.

Sztuczka jest:

  1. Użyj tego rozszerzenia jquery: Kod github

  2. Następnie w opcji autouzupełnianie pass 

    html:true

...autocomplete({
...
html:true
...
}

    );

  3. Teraz możesz przekazać html (jak

    sample
    ) w polu "label" wyjścia JSON dla autouzupełniania.

Jeśli nie wiesz jak dodać plugin do JQuery to:

  1. Save the plugin(rozszerzenie html) w pliku js lub pobierz plik js.
  2. dodano już skrypt autouzupełniania jquery-ui na stronie html(lub plik jQuery-ui js). Dodaj ten skrypt wtyczki po tym autouzupełnianie pliku javascript.

Post date: 28th July, 2013

 4
Author: Wasiq,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-31 06:20:21

Możesz spróbować dodać atrybuty zdarzenia "open": 

$( ".selector" ).autocomplete({
    open: function(event, ui) {
        var jArrEl = $("a.ui-corner-all");
        jArrEl.addClass("myclass");
        jArrEl.attr("customattribute","something");
    }
});
 3
Author: Galled,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-12 21:22:52