jQuery實現input框 文字框 支援手動選擇

2021-10-25 21:24:21 字數 1758 閱讀 7786

需求要讓jquery做系統實現input框可選擇,現在記錄一下實現過程:

js部分:

// 文字框支援選擇

/* 轉化字典值

@param data

@param inputid 供選擇的文字框id

@param datasource 選擇的文字框值資料,為陣列

例:[,]},

]*/

(function ($) ;

var options = $.extend(defaults, options);

if (!options.inputid || options.datasource.length == 0)

var inputdom = $("#" + options.inputid);

var inputvalue = $("#" + options.inputid).val(); //選中的val

console.log(inputvalue)

var divouterwidth = parseint(inputdom.outerwidth()) + 2; //div的寬度

inputdom.wrap('

'); inputdom.addclass("inputselect");

var ulouterwidth = parseint(inputdom.outerwidth()) - 2;

var ulhtml = '';

inputdom.after(ulhtml);

$("#" + options.inputid).focus(function () );

$("#" + options.inputid).keyup(function () );

$(document).click(function (event)

});$(document).on("click", "#" + options.inputid + "selectsearchdiv ul li.selectli", function () );

function defaultselect()

for (var y = 0; y < options.datasource[i].children.length; y++) else

} else else }}

}$("ul." + options.inputid + "searchul").html(li);}}

})(jquery);

css部分:

/* inputselect */

div.inputselectdiv

div.inputselectdiv .inputselect

div.inputselectdiv ul

div.inputselectdiv ul li

div.inputselectdiv ul li.selectli

div.inputselectdiv ul li.active

div.inputselectdiv ul li.selectli:hover

div.inputselectdiv.hover ul

呼叫方法:把input框id傳入,然後文字框支援的選項需要

var contractoptions = [,,

,]},,

,]

},] // 加文字框支援選擇方法

$.inputselect();

jquery 監聽input框失效

使用juery監聽input輸入的變化,並且封裝起來,如下 html js function formonbyid id formonbyid myinput1 以上 監聽input id id 的輸入框的變化.並列印出input中的值到控制台問題在於,有時候這樣監聽會很危險 因為在專案中,有時候d...

jquery 監控input輸入框值得變化

乙個小需求,監控input的值變化,查閱文件,發現很不方便。一堆事件如,onpropertychange,input,keyup,paste,change,blur,又不能同時監聽這些事件,因為當輸入乙個值時,可能同時出發多個,這樣會造成多次業務邏輯的執行。想著能不能一種簡單有用的辦法,又解決跨瀏覽...

jquery實現 城市選擇框

jquery實現 城市選擇框。城市單選框 1 引入js和css 2 指定輸入框 function 3 輸入框 城市 4 修改city.js檔案 在檔案最後 function else ajax cache false,預設為true。設定為 false 將不會從瀏覽器快取中載入請求資訊。dataty...