html:

@*輸入框*@ <div><input type="text" style="width: 85%; height: 34px;" onkeyup="InputChange(this)" id="txtInput"> </div> @*模擬下拉框*@ <div class="divselect" id="dpSelect"></div>

css:

/*選擇框效果*/ .divselect {float: left;position: relative;z-index: 3003;background: #fff;display: none;width: 85%; } .divselect ul {padding: 0;margin: 0;border: 1px solid #E4E4E4;background-color: #ffffff;position: absolute;z-index: 30000;margin-top: -1px;width: 100%;overflow: auto;max-height: 200px; } .divselect ul li {list-style-type: none;cursor: pointer;height: 24px;line-height: 24px; } .divselect ul li:hover {background: #ccc; }

js:

<script type="text/javascript">//點擊模擬下拉框以外的地方 下拉框消失$(document).bind('click', function (e) {var e = e || window.event; //瀏覽器兼容性var elem = e.target || e.srcElement;while (elem) { //循環判斷至跟節點，防止點擊的是div子元素if (elem.id && elem.id == 'dpSelect') {return;}elem = elem.parentNode;}$('#dpSelect').css('display', 'none'); //點擊的不是div或其子元素 });//用文本框onkeyup事件觸發InputChange方法 InputChange方法判斷文本框文字是否改變 文字改變則觸發SearchName方法var sOldValue;sOldValue = "";function InputChange(arg) {var vNewValue = $(arg).val();if (sOldValue != vNewValue) {//根據條件查詢結果并給下拉框動態賦值 SearchName(arg);sOldValue = vNewValue;}}function SearchName(arg) {var name = $(arg).val();//如果搜索框為空 則返回falseif (name == "") {$("#dpSelect").attr("style", "display:none");return false;}else {$("#dpSelect").attr("style", "display:block");}//獲取數據 并給下拉框動態賦html $.ajax({type: "post",url: "......",data: { name: name },dataType: "",async: false,success: function (data) {var strs = "";strs += "<ul>";for (var i = 0; i < data.length; i++) {strs += '<li οnclick="SetValue(this)">' + data[i] + '</li>';}strs += "</ul>";$("#dpSelect").html(strs);},error: function () {alert("查詢出錯");}});}//點擊模擬下拉框內選項后 給文本框賦值 關閉下拉框function SetValue(arg) {var value = $(arg).text();$("#txtInput").val(value);$("#dpSelect").attr("style", "display:none");} </script>

?

轉載于:https://www.cnblogs.com/blazeZzz/p/7927891.html

總結

以上是生活随笔為你收集整理的jQuery+css模拟下拉框模糊搜索的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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