1

我有一些问题要通过单击文本框来显示自动完成的结果。在我的脚本中，当我完成键入一个单词并且当我想再次显示结果时，我必须按向下箭头来运行自动完成功能。如何通过单击文本框并突出显示单词再次显示结果？我使用 ._renderItem 函数来显示结果。

这是我的代码：

$("#NO_CONT" ).autocomplete({
            minLength: 8,
            max : 10,
            scroll: true ,
            width: 410,
            height: 70,
            matchContains: true,
            autoFill: false,
            search  : function(){$(this).addClass('working');},
            open    : function(){$(this).removeClass('working');}, 
            //source: "{$HOME}{$APPID}.auto/container",
            source: function( request, response ) {
                var term = request.term;
                if ( term in cache ) {
                    response( cache[ term ] );
                    return;
                }
                $.getJSON( "{$HOME}{$APPID}.auto/container", request, function( data, status, xhr ) {
                    cache[ term ] = data;
                    response( data );
                });
            },
            focus: function( event, ui ) {              
                $("#NO_CONT").val( ui.item.NO_CONTAINER );              
                return false;
            },
            select: function( event, ui ) {
                $("#NO_CONT").val( ui.item.NO_CONTAINER );
                $("#NO_CONT2").val( ui.item.NO_CONTAINER );


                return false;
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li style='text-align:left'></li>" )
                .data( "item.autocomplete", item )
                .append( "<a style='text-align:left;font-size:16px;'>" + item.NO_CONTAINER + "<br/> "+item.SIZE_+" "+item.TYPE_+" | ["+item.NM_KAPAL+"] ["+item.VOYAGE_IN+"]</a>" )
                .appendTo( ul );
        };
4

2 回答 2

0

我相信这是一个完美的 JSFiddle 示例。

它也有据可查，所以我认为我不应该添加额外的解释。但是，我必须展示一段代码，否则 StackOverflow 不会让我发布此链接。

$.extend($.ui.autocomplete.prototype, {
于 2014-09-17T21:25:37.320 回答
0

尝试添加minChars:0属性

$("#NO_CONT" ).autocomplete({
            minLength: 8,
            max : 10,
            scroll: true ,
            width: 410,
            height: 70,
            minChars:0,
            ................

自定义输出示例：

$("#imageSearch").autocomplete("images.php", {
    width: 320,
    max: 4,
    highlight: false,
    scroll: true,
    scrollHeight: 300,
    formatItem: function(data, i, n, value) {
        return "<img src='images/" + value + "'/> " + value.split(".")[0];
    },
    formatResult: function(data, value) {
        return value.split(".")[0];
    }
});

其他示例http://jquery.bassistance.de/autocomplete/demo/

于 2013-06-16T10:09:23.290 回答