Question

通过单击文本框，我有一些问题要显示自动完成的结果。在我的脚本中，当我完成输入单词时自动完成运行，当我想再次显示结果时，我必须按向下箭头。如何只需点击文本框并突出显示单词，即可再次显示结果？我用._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 );
        };

Answer 1

尝试添加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/

Answer 2

This is a perfect JSFiddle example你想做什么我相信。

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

$.extend($.ui.autocomplete.prototype, {

在点击时显示结果Jquery自动完成？

2 个答案: