JQuery UI自动完成,如何选择&默认情况下突出显示第一个自动完成结果

时间:2014-12-28 19:55:42

标签: javascript jquery jquery-ui jquery-ui-autocomplete

我们正在使用 jquery ui自动填充方法在我的主页搜索中显示关键字。我们想为此设置一些默认功能,例如第一个自动填充关键字(结果)应该自动突出显示&选择。当有人刚开始说话时,它会帮助我们。不选择任何填充的结果,然后按回车键,默认情况下首先选择自动完成关键字。

我们正在使用此代码进行自动填充

<script type="text/javascript">

function monkeyPatchAutocomplete(){

jQuery.ui.autocomplete.prototype._renderItem = function( ul, item) {

    var re = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + this.term + ")(?![^<>]*>)(?![^&;]+;)", "gi");
    var t = item.label.replace(re,"<span style='font-weight:bold;color:#434343;'>" + 
            "$&" + 
            "</span>");
    return jQuery( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + t + "</a>" )
        .appendTo( ul );
};

}

function getKeywords(){

    var allKeywords = <?php echo json_encode($allKeywords); ?>;

    return allKeywords;
}

var URL = '<?php e(SITE_URL); ?>fronts/search';

jQuery(document).ready(function(){

monkeyPatchAutocomplete();

var username = jQuery('#username');

username.autocomplete({
minLength    : 1,
source        : URL


});

var CityKeyword = jQuery('#CityKeyword');

CityKeyword.autocomplete({
minLength    : 1,
source        : getKeywords()
});

});

// A custom jQuery method for placeholder text:

jQuery.fn.defaultText = function(value){

var element = this.eq(0);
element.data('defaultText',value);

element.focus(function(){
if(element.val() == value){
element.val('').removeClass('defaultText');
}
}).blur(function(){
if(element.val() == '' || element.val() == value){
    element.addClass('defaultText').val(value);
}
});

return element.blur();
}

我也试过autofocous: true&amp; selectFirst: true以这种方式但未解决我的问题

var username = jQuery('#username');

username.autocomplete({
minLength    : 1,
   autoFocus: true,
source        : URL,
   selectFirst: true

});

0 个答案:

没有答案