<div class="sadsffd dropdown" id="search" onclick="search.changeValue(this);search.searchKeyword()"><input type="text" class="dropdown-selected inping" id="search-input" placeholder="請(qǐng)輸入關(guān)鍵字" onkeyup="search.searchKeyword();" autocomplete="off"><ul class="option"><li><a href="javaScript:" value="1">1111</a></li><li><a href="javaScript:" value="1">2</a></li><li><a href="javaScript:" value="1">33</a></li><li><a href="javaScript:" value="1">44</a></li></ul></div><style>.dropdown {position: relative;display: inline-block;width: 300px;padding-left: 10px;}.dropdown-selected {width: 100% !important;height: 30px;line-height: 30px;border: 1px solid #c6c8cc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;color: #333;text-indent: 10px;margin-bottom: 0 !important;}.dropdown ul {padding: 0;width: 97%;max-height: 200px;overflow-y: auto;background-color: #fff;margin-top: 2px;border: 1px solid #c6c8cc;position: absolute;display: none;z-index: 2;}.dropdown ul li {list-style: none;text-indent: 10px;}.dropdown ul li a {display: block;color: #282c33;text-decoration: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.dropdown ul li:hover {background-color: #f2f6fa;}.dropdown ul li a:active,.dropdown ul li.active a {background-color: #e4e9f2;}</style><script>var search = {searchKeyword: function() {var nWord = $("#search-input").val();//var temarray = nWord.split(""); //分割var array = this.unique(nWord.split(""));var dsa = $("#search").find("ul li a"); //獲取全部列表var linumber = 0;$("#search ul li").show();for (var t = 0; t < dsa.length; t++) {$(dsa[t]).html($(dsa[t]).text());var temstr = ($(dsa[t]).text()).split("");var yes = false;for (var i = 0; i < array.length; i++) {var posarr = this.findAll(temstr, array[i]);if (posarr.length > 0) {yes = true;for (var j = 0; j < posarr.length; j++) {temstr[posarr[j]] = "<em style='color:red;'>" + temstr[posarr[j]] + "</em>";}}}if (!yes) {$(dsa[t]).closest("li").hide();} else {linumber++;var htmlstr = "";for (var m = 0; m < temstr.length; m++) {htmlstr += temstr[m];}$(dsa[t]).html(htmlstr);}}if (linumber == 0) {$("#search ul li").show();$("#search ul").slideDown(200);}},findAll: function(arr, str) {var results = [],len = arr.length,pos = 0;while (pos < len) {pos = arr.indexOf(str, pos);if (pos === -1) {break;}results.push(pos);pos++;}return results;},unique: function(arr) {var new_arr = [];for (var i = 0; i < arr.length; i++) {var items = arr[i];//判斷元素是否存在于new_arr中，如果不存在則插入到new_arr的最后if ($.inArray(items, new_arr) == -1) {new_arr.push(items);}}return new_arr;},changeValue: function(obj) {$('.dropdown ul').slideUp(200);var input = $(obj).find('.dropdown-selected');var ul = $(obj).find('ul');if (!ul.is(':visible')) {ul.slideDown('fast');} else {ul.slideUp('fast');}$(obj).find('ul a').click(function() {input.val($(this).text());$(this).parent().addClass('active');$(this).parent().siblings().removeClass('active')$(this).closest('ul').slideUp(200);return false;})var e = this.getEvent();window.event ? e.cancelBubble = true : e.stopPropagation();},_init: function() {$("#search").on("click", "ul li a", function() {$("#search-input").val($(this).text());$(this).parent().addClass('active');$(this).parent().siblings().removeClass('active')$(this).closest('ul').slideUp(200);return false;})},getEvent: function() {if (window.event) {return window.event;}var f = arguments.callee.caller;do {var e = f.arguments[0];if (e && (e.constructor === Event || e.constructor === MouseEvent || e.constructor === KeyboardEvent)) {return e;}} while (f = f.caller);}}search._init();</script>

總結(jié)

以上是生活随笔為你收集整理的input 搜索 实时搜索的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。