JQuery UI Autocomplete(自動補全)功能在input前端設計中非常有用，最近一個項目正好用到，仔細研究了下組合框(combobox)的自動補全部分，官方地址是：https://jqueryui.com/autocomplete/#combobox。

官方的功能需要一個額外下拉按鈕才能顯示全部option選項，有些畫蛇添足。我的需求是，只要點擊輸入框，就要顯示全部的option選項，并且在輸入框里面同時能實現搜索，下面是改進版的功能：

官方 combobox 自動補全的全部功能(除了下拉的按鈕)

自動存儲input的值，刷新后保存選擇值。注意，要使用存儲功能，必須設置 select 的 name 屬性

點擊輸入框顯示全部備選項(不需要下拉按鈕)

設置了option value則選擇結果為value，否則為標簽內HTML內容

匹配元素 class，可以設置任意多輸入框

不多說，直接上源碼：

jQuery UI 自動完成(Autocomplete) - 組合框(Combobox)

(function( $ ) {

$.widget( "custom.combobox", {

_create: function() {

this.wrapper = $( "" )

.addClass( "custom-combobox" )

.insertAfter( this.element );

this.element.hide();

this._createAutocomplete();

this._clickShowAll();

},

// 自動補全主功能

_createAutocomplete: function() {

var select = this.element,

option = select.children( "option" ),

selectName = select.attr("name"),

have = false;

// 如果設置了select 的name屬性，則檢查保存數據與頁面option是否匹配

if (selectName){

var localValue = localStorage.getItem(selectName);

option.each(function(){

var itemValue = $(this).val();

if (itemValue === localValue)

{

$(this).attr("selected", "selected");

have = true;

return false;

}

});

// 如果沒有，則新建一個option標簽

if ( !have )

{

$( "" ).appendTo( select )

.val( localValue )

.text( localValue )

.attr("selected", "selected");

}

}

// option selected 標簽的值

var selected = select.children( ":selected" ),

value = selected.val();

// 增加 input 標簽，并設置屬性

this.input = $( "" )

.appendTo( this.wrapper )

.val( value )

.attr({ title: ""})

.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )

.autocomplete({

delay: 0,

minLength: 0,

source: $.proxy( this, "_source" )

})

.tooltip({

tooltipClass: "ui-state-highlight"

});

this._on( this.input, {

autocompleteselect: function( event, ui ) {

ui.item.option.selected = true;

this._trigger( "select", event, {

item: ui.item.option

});

},

autocompletechange: "_removeIfInvalid"

});

},

// 點擊輸入框自動顯示所有值

_clickShowAll: function() {

var input = this.input,

wasOpen = false;

input

.mousedown(function() {

wasOpen = input.autocomplete( "widget" ).is( ":visible" );

})

.click(function() {

input.focus();

// 如果已經可見則關閉

if ( wasOpen ) {

return;

}

// 傳遞空字符串作為搜索的值，顯示所有的結果

input.autocomplete( "search", "" );

});

},

// 獲取子標簽的內容

_source: function( request, response ) {

var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ),

option = this.element.children( "option" );

response( option.map(function() {

var text = $( this ).text(),

val = $( this ).val();

if ( this.value && ( !request.term || matcher.test(text) ) )

return {

label: text,

value: val,

option: this

};

}));

},

// 選擇之后執行這里

_removeIfInvalid: function( event, ui ) {

var selectName = this.element.attr("name"),

value = this.input.val(),

valueLowerCase = value.toLowerCase(),

valid = false,

// 是否進行檢測，如果不檢測輸入內容的合法性，將該值設置為 true 即可

checkInvalid = false;

// 保存數據

this.saveData = function() {

// 如果設置了select的name屬性

if (selectName){

// 存儲數據到localStorage

localStorage.setItem(selectName, value);

}

}

// 如果是直接從下拉菜單中選擇，或者配置為不進行數據檢測，則直接保存數據，并中斷執行

if(ui.item || !checkInvalid){

this.saveData();

return;

} else {

// 搜索一個匹配(不區分大小寫)

this.element.children( "option" ).each(function() {

if ( $( this ).text().toLowerCase() === valueLowerCase ) {

this.selected = valid = true;

return false;

}

});

// 如果檢測通過，則保存數據并中斷執行

if ( valid ) {

this.saveData();

return;

}

// 過濾無效的值功能

this.input

.val( "" )

.attr( "title", value + " 未找到任何結果" )

.tooltip( "open" );

this.element.val( "" );

this._delay(function() {

this.input.tooltip( "close" ).attr( "title", "" );

}, 2500 );

this.input.data( "ui-autocomplete" ).term = "";

// 清除存儲的數據

localStorage.setItem(selectName, "");

}

},

_destroy: function() {

this.wrapper.remove();

this.element.show();

}

});

})( jQuery );

$(function() {

$( ".combobox" ).combobox();

});

您喜歡的編程語言：

請選擇...

ActionScript

AppleScript

Asp

BASIC

C

C++

Clojure

COBOL

ColdFusion

Erlang

Fortran

Groovy

Haskell

Java

JavaScript

Lisp

Perl

PHP

Python

Ruby

Scala

Scheme

因為Jquery、Jquery UI和Jquery UI CSS直接使用新浪SAE，所以保存以上代碼成一個html文件，然后直接打開就可以看到效果了，如下圖：

在輸入框里面輸入任何內容，然后鼠標點擊頁面的其他任意位置，這個值就會保存起來了(在本地?localStorage中)。刷新頁面，還是原來保存的內容。YES。。

總結

以上是生活随笔為你收集整理的html 输入框自动缩短 一行内显示,JQuery UI组合框自动补全功能改进版（即时全部显示+input内容保存）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。