jquery实现带搜索的下拉框

jquery实现带搜索的下拉框

小白菜就不多说了，因为知之甚少。



这是hmtl的样式

* {margin:0;padding:0;}

.dropdown {display:inline-block;width:200px;height:28px;border:1px solid #808080;position:relative;}

.dropdown .editor {display:block;border:0;padding:0;width:100%;box-shadow: inset 1px 2px 3px #ddd;height:inherit;}

.dropdown .trigger {position:absolute;top:0;right:0;}

.dropdown ul {display:none;width:100%;z-index:1111;height:140px;padding:2px;position:absolute;top:100%;background-color:#FFF;border:1px solid #DDD;border-radius: 0 0 5px 5px;overflow-y:auto;overflow-x:hidden;}

.dropdown ul li {height:20px;display:block;font-size:12px;overflow:hidden;cursor:pointer;}

.dropdown ul li .hot {color: red;}

.dropdown ul li:hover {background-color: #EEE;}

.dropdown ul .search {display:block;backgound: url(imgs/search.gif) no-repeat scroll center right;border-bottom: 1px solid #808080;}

.dropdown ul .search:hover{background-color:#FFF;}

.dropdown ul .search input {padding:2px;width:100%;border:0;font-size:14px;background:none;}

<tr style="height:25px;">
<th>国家/地区</th>
<td>
<div  class="dropdown" >  <!-- 模拟 select 的标记， -->
<input class="editor"   id="birthplace" data-bind="birthplace"  oninput="" onpropertychange="" data-role="inoutcombobox"
data-name="birthplace" name="birthplace" type="text"   readonly="readonly"
data-read-url="/GcCombox/resume/getCountryList" required validationMessage='请填写国家！' /> <!-- 显示当前值的输入框 -->
<ul>   <!-- 列表菜单 -->
<li class="search"><input type="text" style="height:38px;padding-bottom: 18px;" placeholder="输入查询" /></li>   <!-- 过滤输入的列表， -->
<!-- 添加数据的时候，都添加在这个地方 -->
</ul>
</div>
</td>
</tr>

上面的oninput=”“和onpropertychange=”“这个是关键，因为我的主要思路是在下拉列表中选择item之后，强制调用input的oninput方法，onpropertychange是为了在ie下也可以用（ 我测试的是ie8）。上面的是html。

(function(){
//当列表项被点击时，把列表项的值放在输入框里面，(“.dropdown”).delegate(“li”, “click”, function(e){

var v = (this).attr(“data−name”),drop=(this).closest(“.dropdown”);

var kv = $(this).attr("value");

if(kv == null ||　kv == ""){
kv ="null";
}
var msgDiv = $(this).parent().parent().find("input").eq(0).attr("name");
drops = $("[name='"+msgDiv+"']");
drops.attr("value", kv);
drops.attr("data-value", kv);
//这里强制调用input的oninput，onpropertychange方法
$("[name='"+msgDiv+"']").trigger('oninput');
$("[name='"+msgDiv+"']").trigger('onpropertychange');
drop.attr("value", kv);
drop.attr("data-name", v);
drop.find(".editor").val(v);
$(this).parent().hide();
e.stopPropagation();
}).delegate(".editor", "click", function(e){    //当下拉按钮被点击时，显示数据列表
$(this).closest(".dropdown").find("ul").show();

4000
e.stopPropagation();  //阻止冒泡，因为冒泡到 document 的时候，会隐藏列表
}).delegate(".search input", "click", function(e){
e.stopPropagation();
}).delegate(".search input", "keyup", function(e){    //当检测到列表中的输入框的时候，启动过滤，不满足的项隐藏
var v = $.trim(this.value), list = $(this).closest("ul").children("li");
if(v == "") {    //特殊情况，过滤输入框中没有值的时候迭代所有的列表项并显示它们
list.each(function(){
if(this.className.indexOf("search") != -1) {return;}//不考虑过滤输入框所在的列表项
$(this).text(this.innerText || this.textContent).show();
});
} else {
list.each(function(){   //迭代列表，
if(this.className.indexOf("search") != -1) {return;}  //不考虑过滤输入框所在的列表项
var lv = $(this).text();   //列表的文本
if(lv.indexOf(v) === -1) {   //不匹配过滤文本，就隐藏
$(this).hide();
} else {                 //匹配，把匹配的文本替换会含有标记的文本（红色）
$(this).html(lv.replace(v, '<span class="hot">'+v+'</span>')).show();
}
});
}
});
$(this).click(function(){
//当数据列表在显示时，如果点击了页面其它区域，则隐藏列表
$(".dropdown ul:visible").hide();
});
$(".editor").click(function (e){
var url = e.target.getAttribute("data-read-url");
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction,  //错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
$("#list").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$("#list").html('');
var json = eval(tt);
var p = $(".dropdown ul");
$('ul>#contentdrop').remove();
var fragment = document.createDocumentFragment(), li;//数组
$.each(json, function (index, item) {
//循环获取数据
var itemKey = json[index].itemKey;
var itemName = json[index].itemName;
li = document.createElement("li");
li.setAttribute("value", itemKey);
li.setAttribute("data-name", itemName);
li.setAttribute("id", "contentdrop");
li.innerHTML = itemName;
fragment.appendChild(li);
});
p.append(fragment);
}
});
});

input的oninput，onpropertychange方法我写在全局的js中

var elVal;

$(“[data-bind=’birthplace’]”).bind(‘oninput onpropertychange’, function(e) {

if (role == ‘datepicker’) {

elVal =    $(e.currentTarget).datepicker("getDate");
that.inputForm.formData[paramName] = elVal;
}else{
//下面两行就是把改变后的值赋值给form表单用于保存
elVal = $(e.target)[0].getAttribute("value");
that.inputForm.formData[paramName] = elVal;
var onchange = el.data("onchange")
if (onchange) {
that.inputForm[onchange](e);
}
}
if (elVal) {
var msgDiv = el.closest("td").find("div").eq(1);
msgDiv.remove();
}
});

基本思路就是

1.在 select点击的时候给input attr 加属性和值

2.然后trigger调用oninput，onpropertychange方法（注意，我是必须在我的html的input中加入 oninput=”” onpropertychange=”“），如果没加就调用不到.bind(‘oninput onpropertychange’, function(e)这个方法。

3.在bind(‘oninput onpropertychange’, function(e)这个方法中改变form的值。

4.在页面的初始化的时候我重新调用url取得value和key的对应值 因为我保存的是编码

if(role==’inoutcombobox’){

var k = value;

var url = el.data(“read-url”);

if (url) {

$.get(url,function(res){

if (res) {

for( var m in res) {

//console.log(res[m].itemKey);

if(res[m].itemKey == k){

el.val(res[m].itemName);

}

//遍历对象，k即为key，obj[k]为当前k对应的值

}

}

});

}

}

5.以上是大致思路，每个人的框架代码不同，最终解决方案很难从网上找到匹配度高的，给个思路和方法自己尝试。