文本框模仿 下拉框,可以输入筛选

<th class="label">

供应商：

</th>

<td class="input">

<%--<asp:DropDownList ID="drpSupply" Width="150px" runat="server">

</asp:DropDownList>--%>

<asp:TextBox ID="txtSupply" runat="server" Width="260px" onkeyup="findAutoPrompt(this,'',true);"

onclick="findAutoPrompt(this,'',true);" ajaxurl="/b2c/handlers/GetAllSuppliers.ashx"

autocomplete="off" MaxLength="20" autowidth="265px" dispalyvalue="true" inputkey="false" showkey="false"></asp:TextBox>

</td>

==================弹出框

<div id="popup" >

<ul id="auto_ul">

</ul>

</div>

================js==========

function refreshParentPage() {

if (window.opener && window.opener.rebind) {

window.opener.rebind();

}

window.location = location.href;

}

var oInputField; //考虑到很多函数中都要使用

var oPopDiv; //因此采用全局变量的形式

var oAuto_Ul;

function initVars(obj) {

//初始化变量

oInputField = $(obj);

oPopDiv = $("#popup");

oAuto_Ul = $("#auto_ul");

}

function clearInputValue() {

//清除提示内容

oAuto_Ul.empty();

oPopDiv.removeClass("show");

}

function setdispalyvalue(value) {

if (oInputField.attr("dispalyvalue") && oInputField.attr("dispalyvalue") == "true") {

var label = $("label[for='" + oInputField.attr("id") + "']");

if (label) {

label.html("");

label.html(value);

}

}

}

function setInputValue(JsonData) {

//显示提示框，传入的参数即为匹配出来的结果组成的数组

clearInputValue(); //每输入一个字母就先清除原先的提示，再继续

oPopDiv.addClass("show");

oPopDiv.css("top", oInputField.offset().top + 21);

oPopDiv.css("left", oInputField.offset().left);

var width = "204px";

if (oInputField.attr("autowidth")) {

width = oInputField.attr("autowidth").replace("px", "");

}

oPopDiv.css("width", width);

//是否显示Key

if (oInputField.attr("showkey") && oInputField.attr("showkey") == "false") {

for (var i = 0; i < JsonData.length; i++) {

oAuto_Ul.append($("<li class='listyle' key='" + JsonData[i].key + "' val='" + JsonData[i].value + "' title='" + JsonData[i].key + "：" + JsonData[i].value + "' >" + JsonData[i].value + "</li>"));

}

}

else {

for (var i = 0; i < JsonData.length; i++) {

oAuto_Ul.append($("<li class='listyle' key='" + JsonData[i].key + "' val='" + JsonData[i].value + "' title='" + JsonData[i].key + "：" + JsonData[i].value + "' >" + JsonData[i].key + "：" + JsonData[i].value + "</li>"));

}

}

//文本框复制Key或者是Value

if (oInputField.attr("inputkey") && oInputField.attr("inputkey") == "false") {

oAuto_Ul.find("li").click(function() {

oInputField.val($(this).attr("val"));

clearInputValue();

oInputField.attr("returnkey", $(this).attr("key"));

}).hover(

function() { $(this).addClass("mouseOver"); },

function() { $(this).removeClass("mouseOver"); }

);

}

else {

oAuto_Ul.find("li").click(function() {

oInputField.val($(this).attr("key"));

clearInputValue();

setdispalyvalue($(this).attr("val"))

oInputField.attr("returnkey", $(this).attr("key"));

}).hover(

function() { $(this).addClass("mouseOver"); },

function() { $(this).removeClass("mouseOver"); }

);

}

setdispalyvalue("");

}

function findAutoPrompt(obj, param, Empty) {

initVars(obj); //初始化变量

if (oInputField.val().length > 0 || Empty) {

//获取异步数据

$.ajax({

type: "post",

url: oInputField.attr("ajaxurl"),

data: { "InputValue": oInputField.val(), "param": param },

success: function(JsonData) {

if (JsonData.length > 0) {

setInputValue(eval(JsonData)); //显示服务器结果

}

else {

clearInputValue();

setdispalyvalue("输入值无效！");

}

}

});

}

else {

clearInputValue(); //无输入时清除提示框（例如用户按del键）

setdispalyvalue("");

}

oInputField.attr("returnkey", "");

}

document.onclick = function() {

if (oInputField && oAuto_Ul && oPopDiv) {

clearInputValue();

}

};