5

Web プロジェクトで jQuery オートコンプリート プラグインを使用しています。私は3つの要素を表示したいのですが、その後、「すべての結果を見る」リンクを一番下に追加したいと考えています。Jquery オートコンプリート

次のコードで試しました。

$( ".grid-search-box" ).autocomplete({
      minLength: 0,
      source: temp,
    focus: function( event, ui ) {
       $( ".grid-search-box" ).val( ui.item.value );
       return false;
     },
     select: function( event, ui ) {
        $( ".grid-search-box" ).val( ui.item.value );
          return false;
             }
    }).data( "autocomplete" )._renderItem = function( ul, item ) 
         {
        return $( "<li></li>" )
           .data( "item.autocomplete", item )
           .append( "<a><span class='" + item.status + "'></span>" + item.value + "</a>" )
        .appendTo( ul );
                        };

誰かが私にそれを解決する方法を提案できますか。

4

1 に答える 1

13

これがデモです、

http://jsfiddle.net/muthkum/vqwBP/105/

実装方法をご理解いただければ幸いです。

更新： 私はあなたのコードを更新することができました、

$( ".grid-search-box" ).autocomplete({
      minLength: 0,
      source: function(request, response) {
        var results = $.ui.autocomplete.filter(temp, request.term);

        response(results.slice(0, 3)); //show 3 items.
    },
    open: function(event, ui) {
        $('.ui-autocomplete').append('<li><a href="javascript:alert(\'redirecting...\')">See All Result</a></li>'); //See all results
         },
    focus: function( event, ui ) {
       $( ".grid-search-box" ).val( ui.item.value );
       return false;
     },
     select: function( event, ui ) {
        $( ".grid-search-box" ).val( ui.item.value );
          return false;
    }
}).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
           .data( "item.autocomplete", item )
           .append( "<a><span class='" + item.status + "'></span>" + item.value + "</a>" )
        .appendTo( ul );
};

デモ： http： //jsfiddle.net/muthkum/vqwBP/106/

于 2012-09-18T15:19:05.043 に答える