ASP.NET自动完成控件，数据源可指定select 可选择，可自动搜索
有些时候我想用自动完成功能，但是又想可以直接选择，目前网上的自动完成控件只能文本输入，
不能类似combox那样选择，所以我在网上找了一个jq写的自动完成插件又改了一下。
以下是网上一位写的基于jq写的自动完成功能：
jq自动完成插件代码
/*
* jQuery AutoComplete
*
* Author: cntlis
* http://blog.csdn.net/cntlis
*
* Licensed like jQuery, see http://docs.jquery.com/License
*
* 作者：cntlis
* QQ：8112857
*/
$.fn.AutoComplete = function(url, option) {
var me = this;
var strKey = $(me).val();
var strKeyBak = "";
var isShow = false;
var jsondata = null;
var isexists = option.isexists;
var arraydata = option.data;
var doption = {
iwidth: '0px', //下拉框的宽度
iLengthLower: 1, //当表单的长度大于iLengthLower小于iLengthUpper时才开始执行搜索
iLengthUpper: 50,
strPara: "Keyword", //变量名称
zIndex: 1, //提示框的Z-INDEX值
hasscroll: 0, //是否出现滚动条0无1有
hasclose: 0, //是否拥有关闭窗口
desfun: (option.desfun ? option.desfun : null)
};
$.extend(doption, option);
var iLengthLower = doption.iLengthLower;
var iLengthUpper = doption.iLengthUpper;
var strPara = doption.strPara;
if ($("#autocomplete").length < 1) { $("body").append("<div id='autocomplete' class='autocompletefloor'></div>"); }
$("#autocomplete").hide();
// $(me).bind("focus", function() {
// if ($("#autocomplete").html().length > 0)
// $("#autocomplete").show();
// });
$(me).keyup(function(e) { keysearch(e.keyCode); });
$(me).keydown(function(e) { LineSelect(e.keyCode, e); });
$(me).bind("blur", function() {
onblur();
floorHide();
});
var encode = function(v) {//如果包含中文就escape,避免重复escape)
return escape(v).replace(/\+/g, '%2B').replace(/\"/g, '%22').replace(/\'/g, '%27').replace(/\//g, '%2F');
}
function onblur() {
strKeyBak = $("#autocomplete ul .selected .keyname").text(); //为click事件增加处理
strkeyextend = $("#autocomplete ul .selected .keyextend").text();
if (strKeyBak.length > 0 && strKeyBak != $(me).val() && strkeyextend.length > 0) {
$(me).val(strKeyBak);
if (doption.desfun)
doption.desfun({ keyname: strKeyBak, keyextend: strkeyextend });
//$("#autocomplete").html("");
} else
if (isexists) $(me).val("");
doption.desfun();
;
$("#autocomplete").html("");
}
function floorHide() {
$("#autocomplete").hide();
strKey = "";
isShow = false;
}
function floorShow() {
var p = $(me).offset();
var w = (doption.iwidth == "0px") ? $(me).width() + 2 : doption.iwidth;
$("#autocomplete").css({
'z-index:': doption.zIndex,
width: w,
top: parseInt(p.top + $(me).outerHeight()) + "px",
left: parseInt(p.left) + "px"
}).show();
strKey = "";
isShow = true;
}
function keysearch(code) {
var strKeyNow = $(me).val();
if (code == 38 || code == 40 || code == 13 || code == 27 || code == 9) return; //TAB/回车、ESC、向上、向下
if ((strKey == "" || strKeyNow != strKey) && strKeyNow.length >= iLengthLower && strKeyNow.length <= iLengthUpper) {
if (!arraydata) {
$.ajax({
type: "Get",
dataType: "json",
url: url,
data: strPara != "" ? strPara + "=" + encode(strKeyNow) : "",
success: function(json) {
json = json.keylist;
if (json.length > 0) {
//获取搜索数据
var strContent = "<ul>";
$.each(json, function(i, n) {
if (n.keyname.length > 0) { //如果
//alert(n.keyname);
strContent += '<li class="keyinfo"><span class="keyname">' + n.keyname + '</span>';
try {
if (n.keyextend.length > 0) { strContent += '<span class="keyextend">' + n.keyextend + '</span>'; }
} catch (E) { };
strContent += '</li>';
};
});
if (doption.hasclose == 1) {
strContent += '<li class="close"><span>关闭</span></li>';
}
strContent += '</ul>';
$("#autocomplete").html(strContent);
$("#autocomplete .keyinfo").mouseover(function() { $("#autocomplete .selected").removeClass("selected"); $(this).removeClass("unselected").addClass("selected"); }).mouseout(function() { $(this).removeClass("selected").addClass("unselected"); }).click(function() { if (strKeyBak.length() > 0) { $(me).val(strKeyBak); } });
floorShow();
} else {
//没有搜索数据
floorHide();
return;
}
},
error: function(data) {
///alert(data.responseText);
}
});
}
else {
if (arraydata.length > 0) {
// var tempdata = [];
var strContent = "<ul>";
var flag = false;
$.each(arraydata, function(i, n) {
if (n.keyname.indexOf(strKeyNow) > -1) {
flag = true;
if (n.keyname.length > 0) { //如果
//alert(n.keyname);
strContent += '<li class="keyinfo"><span class="keyname">' + n.keyname + '</span>';
try {
if (n.keyextend.length > 0) { strContent += '<span class="keyextend">' + n.keyextend + '</span>'; }
} catch (E) { };
strContent += '</li>';
};
//tempdata.push({ keyname: n.keyname, keyextend: n.keyextend });
}
});
if (flag) {
if (doption.hasclose == 1) {
strContent += '<li class="close"><span>关闭</span></li>';
}
strContent += '</ul>';
$("#autocomplete").html(strContent);
$("#autocomplete .keyinfo").mouseover(function() { $("#autocomplete .selected").removeClass("selected"); $(this).removeClass("unselected").addClass("selected"); }).mouseout(function() { $(this).removeClass("selected").addClass("unselected"); }).click(function() { if (strKeyBak.length() > 0) { $(me).val(strKeyBak); } });
floorShow();
}
else {
floorHide();
return;
}
}
else {
//没有搜索数据
floorHide();
return;
}
}
strKey = $(me).val();
}
if (strKey.length == 0 || strKey.length < iLengthLower || strKey.length >= iLengthUpper) floorHide();
}
function LineSelect(code, e) {
if (code == 27) { floorHide(); }; //回车键、ESC键
if (code == 13) {
floorHide();
strKeyBak = $("#autocomplete ul .selected .keyname").text(); //为click事件增加处理
strkeyextend = $("#autocomplete ul .selected .keyextend").text();
if (strKeyBak.length > 0 && strkeyextend.length > 0) {
// $(me).val(strKeyBak);
doption.desfun({ keyname: strKeyBak, keyextend: strkeyextend });
$("#autocomplete").html("");
}
else
doption.desfun();
};
if (!isShow) return;
ObjSelected = $("#autocomplete ul .selected");
if (ObjSelected.length > 0) { //如果已经有选定
//alert('dasfdas');
if (code == 38) { //向上键
if (ObjSelected.prev().text() != "") { //如果不是第一个数据
ObjSelected.removeClass("selected").addClass("unselected").prev().removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
} else {
ObjSelected.removeClass("selected").addClass("unselected");
$("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}
} else if (code == 40) { //向下键
if (ObjSelected.next().text() != "") { //如果不是第一个数据
ObjSelected.removeClass("selected").addClass("unselected").next().removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
} else {
ObjSelected.removeClass("selected").addClass("unselected");
$("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}
}
} else if (code == 38) {
$("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete .keyinfo:last .keyname").text());
} else if (code == 40) {
$("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete .keyinfo:first .keyname").text());
}
}
}
CSS 样式：
样式代码
#autocomplete
{
border: 1px solid WindowFrame;
background-color: Window;
position: absolute;
}
#autocomplete ul
{
margin:0;
padding:0;
}
/*每行的格式*/
#autocomplete li
{
display: block;
text-align: left;
font-size: 12px;
height: 20px;
line-height: 20px;
background-color: #fff;
cursor: default;
padding: 0 5px;
clear: both;
list-style-type:none;
}
/*鼠标选中时的格式*/
#autocomplete .selected
{
background-color: #565da9;
color: #fff;
overflow: hidden;
}
/*鼠标离开时代格式*/
#autocomplete .unselected
{
background-color: #fff;
color: #000;
}
/*关键字信息*/
#autocomplete .keyname
{
display: block;
float: left;
}
/*关键字扩展信息*/
#autocomplete .keyextend
{
display: block;
float: right;
color: green;
}
#autocomplete .unselected .keyextend
{
color: green;
}
#autocomplete .selected .keyextend
{
color: #fff;
}
/*关闭*/
#autocomplete .close
{
text-align: right;
}
#autocomplete .close span
{
color: blue;
cursor: pointer;
text-decoration: underline;
}
HTML 页面代码：
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jq.complete.js" type="text/javascript"></script>
<link href="atuocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
/*获取select 数据源*/
var selectdata = [];
$("#drpRoadName option").each(function(i, n) {
selectdata.push({ keyname: $(this).text(), keyextend: $(this).val() });
});
/*初始化自动完成*/
//第一个参数可以是一个URL ajax 方式获取数据 {'keylist':[{'keyname':'你好','keyextend':'扩展'},{'keyname':'你好1','keyextend':'扩展1'}]}
$("#textRoadName").AutoComplete("", {
//回调时间 选择项目时候回调
desfun: function(item) {
if (item)
$("#drpRoadName").val(item.keyextend);
else
$("#drpRoadName").val("");
},
//是否验证数据有效性
isexists: true,
//数据源
data: selectdata
});
}); //
</script>
</head>
<body class="bodyBg">
<form name="FORM1" method="post" action="OUTSIDEINFOAdd.aspx?type=1" id="FORM1" enctype="multipart/form-data">
<div>
</div>
<table cellspacing="0" cellpadding="6" border="0" style="text-align: left" class="bottoom_border_table">
<td>
道路名称：
</td>
<td valign="top">
<input name="textRoadName" type="text" id="textRoadName" style="width: 161px; position: absolute"
maxlength="30" autocomplete="off" />
<select name="drpRoadName" id="drpRoadName" onchange="document.getElementById('textRoadName').value=this.options[this.selectedIndex].text;"
style="width: 178px; clip: rect(auto auto auto 160px); position: absolute">
<option value=""></option>
<option value="430">芳古路</option>
<option value="431">南大红门路</option>
<option value="432">西管头路</option>
<option value="433">郭公庄路</option>
<option value="434">丰台危改小区3’线道路</option>
<option value="435">定安路</option>
<option value="436">石景山路</option>
<option value="437">京原路</option>
<option value="438">老山北路立交道路</option>
<option value="439">射击场南路</option>
<option value="440">西五环中路</option>
<option value="441">鲁谷东路</option>
<option value="442">体育场南路</option>
<option value="443">鲁谷路</option>
<option value="444">西五环衙门口村路1#</option>
<option value="445">西五环衙门口村路2#</option>
<option value="446">八大处路</option>
<option value="447">鲁谷大街</option>
<option value="448">万泉河路</option>
<option value="449">学院路</option>
<option value="450">东北旺北路东段</option>
<option value="451">玉泉山路</option>
<option value="452">黑龙潭路</option>
<option value="453">东北旺北路西段</option>
<option value="454">国关学院门前</option>
<option value="455">颐和园路</option>
<option value="167">赵登禹路</option>
<option value="168">展览馆路</option>
<option value="169">德胜门外大街左侧辅路</option>
<option value="170">景山西街</option>
<option value="171">西四南大街</option>
<option value="172">太平桥大街</option>
<option value="173">三里河东路</option>
<option value="174">北长街</option>
<option value="175">府右街</option>
<option value="176">西单北大街</option>
<option value="177">南长街</option>
<option value="178">北新华街</option>
<option value="179">宣武门内大街</option>
<option value="181">司法胡同</option>
<option value="182">人大西侧路</option>
<option value="183">西四北大街</option>
<option value="184">西直门北大街左侧辅路</option>
<option value="185">西直门北大街右侧辅路</option>
<option value="186">新街口东大街</option>
<option value="187">闹市口北街</option>
<option value="188">闹市口大街</option>
<option value="189">广渠门北滨河路（主路）</option>
<option value="191">光明桥南大街(主路)</option>
<option value="192">广渠门内大街</option>
<option value="193">珠市口东大街</option>
<option value="196">光明路</option>
<option value="197">东蒲立交北滨河路</option>
<option value="198">崇文门东大街</option>
<option value="199">广渠门北滨河路（内环辅路）</option>
<option value="200">广渠门北滨河路（外环辅路）</option>
<option value="201">永定门西滨河路（外环辅路）</option>
<option value="202">光明桥南大街(外环辅路)</option>
<option value="203">前门大街</option>
<option value="204">天桥南大街</option>
<option value="205">永定门内大街</option>
<option value="206">崇文门外大街</option>
<option value="207">天坛东路</option>
<option value="208">兴隆街</option>
<option value="209">打磨厂路（双向）</option>
<option value="210">莲子巷路（双向）</option>
<option value="211">广安门北滨河路（主路）</option>
<option value="212">珠市口西大街</option>
<option value="214">广安门内大街</option>
<option value="216">永安路</option>
<option value="218">陶然亭路</option>
<option value="221">广安门北滨河路（外环辅路）</option>
<option value="222">南新华街</option>
<option value="224">长椿街</option>
<option value="225">手帕口北街</option>
<option value="226">虎坊路</option>
<option value="229">右安门内大街</option>
<option value="230">菜市口大街</option>
<option value="231">南蜂窝路</option>
<option value="233">马连道南街</option>
<option value="234">京承连络线主路</option>
<option value="235">京津塘连接线</option>
<option value="236">来广营东路</option>
<option value="237">来广营西路</option>
<option value="238">辛店村立交道路</option>
<option value="239">望京北路</option>
<option value="240">科荟路</option>
<option value="241">北小河路</option>
<option value="242">京通左辅路</option>
<option value="243">京通右辅路</option>
<option value="244">北土城东路</option>
<option value="245">亮马桥路</option>
<option value="246">酒仙桥南路</option>
<option value="247">朝阳公园南路</option>
<option value="248">农展馆南路</option>
<option value="249">朝阳北路</option>
<option value="250">朝阳门外大街</option>
<option value="251">朝阳路</option>
<option value="252">建国路</option>
<option value="253">建国门外大街</option>
<option value="254">广渠路</option>
<option value="255">广渠门外大街</option>
<option value="256">劲松路</option>
<option value="257">南磨房路</option>
<option value="258">松榆北路</option>
<option value="259">松榆南路</option>
<option value="79">北京站广场</option>
<option value="80">北京站西街</option>
<option value="81">建国门内大街</option>
<option value="82">安定门西大街（内环辅路）</option>
<option value="83">安定门西大街（外环辅路）</option>
<option value="84">安定门东大街（内环辅路）</option>
<option value="85">安定门东大街（外环辅路）</option>
<option value="86">东直门北大街（内环辅路）</option>
<option value="87">东直门北大街（外环辅路）</option>
<option value="88">东直门南大街（内环辅路）</option>
<option value="89">东直门南大街（外环辅路）</option>
<option value="90">朝阳门北大街（内环辅路）</option>
<option value="91">朝阳门北大街（外环辅路）</option>
<option value="92">朝阳门南大街（内环辅路）</option>
<option value="93">朝阳门南大街（外环辅路）</option>
<option value="94">建国门北大街（内环辅路）</option>
<option value="95">建国门北大街（外环辅路）</option>
<option value="96">安定门外大街</option>
<option value="97">雍和宫大街</option>
<option value="98">安定门内大街</option>
<option value="99">东四北大街</option>
<option value="100">交道口南大街</option>
<option value="101">美术馆后街</option>
<option value="102">北河沿北大街</option>
<option value="103">美术馆东街</option>
<option value="104">东四南大街</option>
<option value="105">王府井大街</option>
<option value="106">北河沿南大街</option>
<option value="107">北池子大街</option>
<option value="108">东单北大街</option>
<option value="109">南河沿大街</option>
<option value="110">南池子大街</option>
<option value="111">天安门庭院</option>
<option value="112">北京站前街</option>
<option value="113">崇文门内大街</option>
<option value="114">台基厂大街</option>
<option value="115">正义路东线</option>
<option value="116">广场东侧路</option>
<option value="117">天安门广场</option>
<option value="118">金宝街</option>
<option value="119">金鱼胡同</option>
<option value="120">东单公园北侧路</option>
<option value="121">东湖别墅小区路</option>
<option value="122">百货大楼西侧路</option>
<option value="123">北京站东路</option>
<option value="124">正义路西线</option>
<option value="125">复兴门南大街（主路）</option>
<option value="126">复兴门北大街（主路）</option>
<option value="127">阜成门南大街（主路）</option>
<option value="128">阜成门北大街（主路）</option>
<option value="129">西直门南大街（主路）</option>
<option value="130">德胜门西大街（主路）</option>
<option value="131">德胜门东大街（主路）</option>
<option value="132">新康路</option>
<option value="550">西四环南路（内环辅路）</option>
<option value="551">西四环南路（外环辅路）</option>
<option value="552">东四环北路（内环辅路）</option>
<option value="553">东四环北路（外环辅路）</option>
<option value="554">东四环北路（主路）</option>
<option value="555">西四环北路（主路）</option>
<option value="556">西四环北路（外环辅路）</option>
<option value="557">西四环中路（主路）</option>
<option value="558">西四环中路（外环辅路）</option>
<option value="559">西四环中路（内环辅路）</option>
<option value="560">西四环南路（主路）</option>
<option value="561">西四环北路（内环辅路）</option>
<option value="562">德胜门外大街</option>
<option value="563">东四环南路（外环辅路）</option>
<option value="564">西直门外大街</option>
<option value="565">万泉河路</option>
<option value="566">西土城路（主路）</option>
<option value="567">学院路(主路)</option>
<option value="568">东四环中路（内环辅路）</option>
<option value="569">南四环西路（外环辅路）</option>
<option value="570">北四环西路（外环辅路）</option>
<option value="571">北四环西路（主路）</option>
<option value="572">北四环中路（主路）</option>
<option value="573">北四环中路（内环辅路）</option>
<option value="574">北四环中路（外环辅路）</option>
<option value="575">北四环东路（主路）</option>
<option value="576">北四环东路（内环辅路）</option>
<option value="577">北四环东路（外环辅路）</option>
<option value="578">南四环西路（主路）</option>
<option value="579">南四环西路（内环辅路）</option>
<option value="580">南四环东路（主路）</option>
<option value="581">南四环东路（内环辅路）</option>
<option value="582">北四环西路（内环辅路）</option>
<option value="583">南四环东路（外环辅路）</option>
<option value="584">南四环中路（主路）</option>
<option value="585">南四环中路（内环辅路）</option>
<option value="586">南四环中路（外环辅路）</option>
<option value="587">北三环西路（主路）</option>
<option value="588">北三环西路（内环辅路）</option>
<option value="589">北三环西路（外环辅路）</option>
<option value="590">北三环中路（主路）</option>
<option value="591">北三环中路（内环辅路）</option>
<option value="592">北三环中路（外环辅路）</option>
<option value="593">北三环东路（主路）</option>
<option value="594">北三环东路（内环辅路）</option>
<option value="595">北三环东路（外环辅路）</option>
<option value="596">东三环北路（主路）</option>
<option value="597">东三环北路（内环辅路）</option>
<option value="598">东三环北路（外环辅路）</option>
<option value="599">东三环中路（主路）</option>
<option value="600">东三环中路（内环辅路）</option>
<option value="601">东三环中路（外环辅路）</option>
<option value="602">东三环南路（主路）</option>
<option value="603">东三环南路（内环辅路）</option>
<option value="604">东三环南路（外环辅路）</option>
<option value="605">南三环东路（主路）</option>
<option value="606">南三环东路（内环辅路）</option>
<option value="607">南三环东路（外环辅路）</option>
<option value="608">南三环中路（主路）</option>
<option value="609">南三环中路（内环辅路）</option>
<option value="610">南三环中路（外环辅路）</option>
<option value="611">南三环西路（主路）</option>
<option value="612">南三环西路（内环辅路）</option>
<option value="613">南三环西路（外环辅路）</option>
<option value="614">西三环南路(主路)</option>
<option value="615">西三环南路(内环辅路)</option>
<option value="616">西三环南路(外环辅路)</option>
<option value="617">西三环中路(主路)</option>
<option value="618">西三环中路(内环辅路)</option>
<option value="619">西三环中路(外环辅路)</option>
<option value="620">西三环北路(主路)</option>
<option value="621">西三环北路(内环辅路)</option>
<option value="622">西三环北路(外环辅路)</option>
<option value="623">莲石东路（主路）</option>
<option value="624">莲石东路左侧辅路</option>
<option value="625">莲石东路右侧辅路</option>
<option value="626">莲石西路(主路)</option>
<option value="627">莲花池西路(主路)</option>
<option value="628">莲花池西路(左辅)</option>
<option value="629">莲花池西路(右辅)</option>
<option value="630">西直门北大街</option>
<option value="631">紫竹院路(主路)</option>
<option value="456">香山路</option>
<option value="457">知春路</option>
<option value="458">长春桥路</option>
<option value="459">远大路</option>
<option value="460">学院南路</option>
<option value="461">魏公村路</option>
<option value="462">紫竹院路左辅路</option>
<option value="463">车公庄西路</option>
<option value="464">玲珑路</option>
<option value="465">阜成路</option>
<option value="466">西北旺镇西路</option>
<option value="467">西北旺南路</option>
<option value="468">复兴路</option>
<option value="469">圆明园西路立交 西南辅路</option>
<option value="470">万安东路</option>
<option value="471">板井路</option>
<option value="472">紫竹院路右辅路</option>
<option value="473">万寿寺路</option>
<option value="474">紫竹院主路</option>
<option value="475">黑山沪路</option>
<option value="476">学院路（右侧辅路）</option>
<option value="477">学院路（左侧辅路）</option>
<option value="478">万泉河路左侧</option>
<option value="479">昌平路（右侧辅路）</option>
<option value="480">万泉河路右侧</option>
<option value="481">圆明园西路</option>
<option value="482">香山南路</option>
<option value="483">志新东路</option>
<option value="484">苏州街路</option>
<option value="485">中关村大街</option>
<option value="486">花园东路</option>
<option value="487">蓝靛厂北路</option>
<option value="488">北太平庄道路</option>
<option value="489">昆明湖南路</option>
<option value="490">颐南路</option>
<option value="491">皂君庙路</option>
<option value="492">中关村南大街</option>
<option value="493">蓝靛厂南路</option>
<option value="494">首体南路</option>
<option value="495">玉泉路</option>
<option value="496">万寿路</option>
<option value="497">西翠路</option>
<option value="498">北蜂窝路</option>
<option value="499">羊坊店路</option>
<option value="500">北蜂窝北路</option>
<option value="501">学清路左侧</option>
<option value="502">学清路右侧</option>
<option value="503">学清路</option>
<option value="504">西土城路</option>
<option value="505">土城西侧路</option>
<option value="506">恩济东街</option>
<option value="507">小府路</option>
<option value="508">铁路巷</option>
<option value="509">旱河路</option>
<option value="510">信息路</option>
<option value="511">上地村西路</option>
<option value="512">永丰路</option>
<option value="513">中关村北大街</option>
<option value="514">长春桥—绮便桥</option>
<option value="515">北坞村路</option>
<option value="516">安宁庄路</option>
<option value="517">中关村路</option>
<option value="518">清华东路</option>
<option value="519">清华西路</option>
<option value="520">成府路</option>
<option value="521">海淀南路</option>
<option value="522">闵庄路</option>
<option value="523">杏石口路</option>
<option value="524">莲花池西路</option>
<option value="525">海淀路</option>
<option value="526">玉渊潭南路</option>
<option value="527">八里庄道路</option>
<option value="528">巴沟村北路</option>
<option value="529">西二旗南路</option>
<option value="530">西郊机场门前路</option>
<option value="535">大运村路</option>
<option value="536">海淀中街</option>
<option value="537">西二旗东一路</option>
<option value="538">安宁庄西路</option>
<option value="539">西二旗中路</option>
<option value="540">西三旗东路</option>
<option value="541">南马坊西路</option>
<option value="542">三峡办研究中心外部西侧</option>
<option value="543">上地村东路</option>
<option value="544">中关村北二街</option>
<option value="545">定慧寺路</option>
<option value="546">东四环南路（内环辅路）</option>
<option value="547">东四环南路（主路）</option>
<option value="548">东四环中路（主路）</option>
<option value="549">东四环中路（外环辅路）</option>
<option value="260">呼家楼北街</option>
<option value="261">通惠河北岸</option>
<option value="262">静安西街</option>
<option value="263">姚家园新路</option>
<option value="264">京沈高速右辅路</option>
<option value="265">京沈高速左辅路</option>
<option value="266">工人体育场南路-1</option>
<option value="267">五环东坝南二街路</option>
<option value="268">北五环（外环）</option>
<option value="269">北五环（内环）</option>
<option value="270">五环平房立交道路1号</option>
<option value="271">五环平房立交道路2号</option>
<option value="272">五环平房立交道路3号</option>
<option value="273">五环平房立交道路4号</option>
<option value="274">五方立交辅路3</option>
<option value="275">五方立交辅路4</option>
<option value="276">五环路大羊坊立交辅路1</option>
<option value="277">五环路大羊坊立交辅路2</option>
<option value="278">五环路大羊坊立交辅路3</option>
<option value="279">京顺路</option>
<option value="280">安立路</option>
<option value="281">北苑路</option>
<option value="282">机场辅路</option>
<option value="283">广顺北大街</option>
<option value="284">北辰东路</option>
<option value="285">阜安西路</option>
<option value="286">惠新东街</option>
<option value="287">惠新西街</option>
<option value="288">北辰路</option>
<option value="289">阜通西大街</option>
<option value="290">阜通东大街</option>
<option value="291">酒仙桥路</option>
<option value="292">京承路左侧辅路</option>
<option value="293">京承路右侧辅路</option>
<option value="294">五元立交道路</option>
<option value="295">樱花园东街</option>
<option value="296">樱花园西街</option>
<option value="297">芳园西路</option>
<option value="298">霄云路</option>
<option value="299">新东路</option>
<option value="300">工人体育场东路</option>
<option value="404">科技大道</option>
<option value="405">丰台东大街</option>
<option value="406">程庄路</option>
<option value="407">京石立交道路</option>
<option value="408">马家堡西路</option>
<option value="409">供热厂路</option>
<option value="410">中央戏曲学院外部路</option>
<option value="411">八一厂西路</option>
<option value="412">开阳路</option>
<option value="413">方庄南路</option>
<option value="414">马官营路</option>
<option value="415">北京西站南路</option>
<option value="416">右外斜街</option>
<option value="417">吴家村路</option>
<option value="418">大成路</option>
<option value="419">东南五环南侧路</option>
<option value="420">蒲方路</option>
<option value="421">警备西路</option>
<option value="422">丰台南路</option>
<option value="423">南苑西路</option>
<option value="424">警备东路</option>
<option value="425">南苑东路</option>
<option value="426">石榴庄路</option>
<option value="427">双营通道桥引道</option>
<option value="429">方庄路</option>
<option value="385">五环京石4#防洪通道</option>
<option value="386">卢沟桥南路</option>
<option value="387">广安路</option>
<option value="388">水衙沟路</option>
<option value="389">供热厂东路</option>
<option value="390">左安门西滨河路（内环辅路）</option>
<option value="1594">知春路</option>
<option value="1454">学院路</option>
<option value="1613">东三环南路</option>
<option value="301">东大桥路</option>
<option value="302">西大望路</option>
<option value="303">化工路北段</option>
<option value="304">化工路南段</option>
<option value="305">广顺南大街</option>
<option value="306">望京街</option>
<option value="307">东苇路</option>
<option value="308">红军营东路</option>
<option value="309">东坝河中路</option>
<option value="310">天辰立交道路</option>
<option value="311">老东苇路</option>
<option value="312">广泽桥立交道路</option>
<option value="313">朝科3#路</option>
<option value="314">现代城西路</option>
<option value="315">安华路</option>
<option value="316">安定路</option>
<option value="317">工人体育场南路-2</option>
<option value="318">劲松南路</option>
<option value="319">康化路</option>
<option value="320">清河东路</option>
<option value="190">永定门西滨河路（主路）</option>
<option value="232">白广路二条</option>
<option value="228">太平街</option>
<option value="217">北纬路</option>
<option value="223">宣武门外大街</option>
<option value="227">牛街</option>
<option value="1673">左安门桥</option>
<option value="180">白云路</option>
<option value="1674">方庄桥</option>
<option value="1675">亦庄桥</option>
<option value="393">右安门西滨河路（外环辅路）</option>
<option value="215">广安门外大街</option>
<option value="1676">分钟寺桥</option>
<option value="1677">景泰桥</option>
<option value="1678">玉泉营桥</option>
<option value="1679">赵公口桥</option>
<option value="1680">玉泉营桥（西洞）</option>
<option value="1681">木樨园桥</option>
<option value="1682">玉蜓桥</option>
<option value="1683">刘家窑桥</option>
<option value="1684">肖村桥</option>
<option value="1685">小红门桥</option>
<option value="1686">大红门桥</option>
<option value="213">骡马市大街</option>
<option value="1687">菜户营桥</option>
<option value="395">菜户营南路</option>
<option value="220">白纸坊西街</option>
<option value="219">白纸坊东街</option>
<option value="1688">马家楼桥</option>
<option value="1689">花乡桥</option>
<option value="1690">新发地桥</option>
<option value="1691">丽泽桥</option>
<option value="1692">丰北桥</option>
<option value="1693">科丰桥</option>
<option value="1694">永定门桥</option>
<option value="1695">广渠门桥</option>
<option value="194">天坛路</option>
<option value="195">体育馆路</option>
<option value="391">左安门西滨河路（外环辅路）</option>
<option value="1713">莲花桥</option>
<option value="1714">双营桥</option>
<option value="1715">六里桥</option>
<option value="1716">双营通道桥</option>
<option value="1717">东铁营桥</option>
<option value="1718">丰台路四环立交桥</option>
<option value="1719">万柳桥</option>
<option value="1720">丰益桥</option>
<option value="1721">洋桥</option>
<option value="1725">西黄线立交</option>
<option value="1723">丰葆立交桥</option>
<option value="1724">西南四环高架桥</option>
<option value="1726">玉泉营立交</option>
<option value="1727">南苑路桥</option>
<option value="1728">京开路铁路立交桥</option>
<option value="1729">木樨园铁路立交桥</option>
<option value="1730">天宁寺桥</option>
<option value="1731">广安门桥</option>
<option value="1732">右安门桥</option>
<option value="1733">陶然亭桥</option>
<option value="1734">南北线阁立交桥</option>
<option value="1735">白纸坊立交桥</option>
<option value="1736">马家铺东路</option>
<option value="1737">南三环主路</option>
<option value="1738">南三环辅路</option>
<option value="1739">南四环主路</option>
<option value="1740">南四环辅路</option>
<option value="1741">光彩路</option>
<option value="1742">光彩北路</option>
<option value="1746">红寺西无名桥</option>
<option value="1747">大红门东桥</option>
<option value="1745">红寺桥</option>
<option value="1748">丰体南路</option>
<option value="1749">戏曲学院路</option>
<option value="1750">新发地北桥</option>
<option value="1751">京开辅路</option>
<option value="1752">白纸坊桥</option>
<option value="1753">白云桥</option>
<option value="1754">新兴桥</option>
<option value="1756">西客站南路</option>
<option value="1773">西唐街天桥</option>
<option value="1774">法华寺天桥</option>
<option value="1775">崇外大街109中学天桥</option>
<option value="531">大石桥道路</option>
<option value="532">采石路康居小区道路</option>
<option value="533">西五环北路</option>
<option value="534">双清路</option>
<option value="1776">天坛中医院天桥</option>
<option value="1777">玉蜓公寓天桥</option>
<option value="1778">五线谱天桥</option>
<option value="1779">磁器口东天桥</option>
<option value="1780">珠市口东大街天桥</option>
<option value="1781">正义路南延东天桥</option>
<option value="1782">台基厂南延东天桥</option>
<option value="1783">安化楼天桥</option>
<option value="1784">广渠门中学天桥</option>
<option value="1785">安乐林天桥</option>
<option value="1786">蒲安里天桥</option>
<option value="1787">木樨园立交东天桥</option>
<option value="1788">赵公口立交东天桥</option>
<option value="1789">刘家窑北天桥</option>
<option value="1790">赵公口立交西天桥</option>
<option value="1791">东铁营立交东天桥</option>
<option value="1792">东铁营立交西天桥</option>
<option value="1793">草桥北天桥</option>
<option value="1794">北甲地天桥</option>
<option value="1795">马家堡西天桥</option>
<option value="1796">马家堡北天桥</option>
<option value="1797">木樨园立交西天桥</option>
<option value="1798">方庄立交东天桥</option>
<option value="1799">菜户营东天桥</option>
<option value="1800">六里桥南里天桥</option>
<option value="1801">西局后街天桥</option>
<option value="1802">丽泽立交北天桥</option>
<option value="1803">丽泽立交南天桥</option>
<option value="1804">丰益北天桥</option>
<option value="1805">房家村东天桥</option>
<option value="1806">万柳立交西天桥</option>
<option value="1807">万柳立交东天桥</option>
<option value="1808">吴家村天桥</option>
<option value="1809">洋桥立交北天桥</option>
<option value="1810">京开马草河桥南天桥</option>
<option value="1811">四开立交北天桥</option>
<option value="1812">四开立交南天桥</option>
<option value="1813">京开九龙山庄天桥</option>
<option value="1814">电力医院天桥</option>
<option value="1815">丰台大桥北天桥</option>
<option value="1816">城南家园天桥</option>
<option value="1817">丰台南路东侧天桥</option>
<option value="1818">京九铁路东天桥</option>
<option value="1819">翠林小区天桥</option>
<option value="1820">大红门立交东天桥</option>
<option value="1821">大红门东立交西天桥</option>
<option value="1822">榴香立交西天桥</option>
<option value="1823">肖村立交东天桥</option>
<option value="1824">怡海花园天桥</option>
<option value="1825">马家楼立交东天桥</option>
<option value="1826">南新华街天桥</option>
<option value="1827">白广路北口西天桥</option>
<option value="1828">广内西砖天桥</option>
<option value="1829">万明路北口西天桥</option>
<option value="1830">留学路北口西天桥</option>
<option value="1831">珠市口 路口西天桥</option>
<option value="1832">三峡办道路</option>
<option value="1833">东兴隆街</option>
<option value="1834">天坛南路</option>
<option value="1835">中央戏曲学院道路</option>
<option value="1836">太平桥南里（西客站南路）</option>
<option value="1837">丰台危改3线道路</option>
<option value="1838">双营铁道桥引道</option>
<option value="1839">蒲芳路</option>
<option value="428">马家堡康居小区</option>
<option value="1854">京开路</option>
<option value="1855">丰台北路</option>
<option value="1856">三环路</option>
<option value="1857">三环路</option>
<option value="1858">三环路</option>
<option value="1859">四环路</option>
<option value="1860">四环路</option>
<option value="1861">四环路</option>
<option value="1862">万丰路南延（东大街）</option>
<option value="1863">二环路</option>
<option value="1864">二环路</option>
<option value="1865">二环路</option>
<option value="1866">二环路</option>
<option value="1867">左安门桥</option>
<option value="1868">天坛东路桥(西)</option>
<option value="1869">三路居桥</option>
<option value="1870">凉水河桥</option>
<option value="1871">丰草河桥</option>
<option value="1872">大红门桥</option>
<option value="1873">南苑镇桥</option>
<option value="1874">三营门东桥</option>
<option value="1875">三营门西桥</option>
<option value="1876">洋桥</option>
<option value="1877">珊瑚桥</option>
<option value="1878">右外关厢桥</option>
<option value="1879">草桥</option>
<option value="1880">玉泉营桥</option>
<option value="1881">马神庙桥</option>
<option value="1882">孟家桥</option>
<option value="1883">马草河东辅路桥</option>
<option value="1884">造玉沟涵</option>
<option value="1885">马家堡凉水河桥</option>
<option value="1886">西罗园小区桥</option>
<option value="1887">西罗园小区南桥</option>
<option value="1888">南旱河出口桥</option>
<option value="1889">马草河出口桥</option>
<option value="1890">马家堡扬水站桥</option>
<option value="1891">玉林南路桥</option>
<option value="1892">丰台路莲花河桥</option>
<option value="1893">马草河西辅路桥</option>
<option value="1894">马家堡中路跨河桥</option>
<option value="1895">三峡办经研中心桥</option>
<option value="1896">天宁寺热力天桥</option>
<option value="1897">甘雨桥</option>
<option value="1898">大观园前天桥</option>
<option value="1899">侨园饭店跨河桥</option>
<option value="1900">菜户营通道</option>
<option value="1901">芳星园1号通道</option>
<option value="1902">芳星园2号通道</option>
<option value="1903">芳星园3号通道</option>
<option value="1904">芳星园4号通道</option>
<option value="1905">六里桥南通道</option>
<option value="1906">六里桥北通道</option>
<option value="1907">玉蜓立交东通道</option>
<option value="1908">芳古路北口通道</option>
<option value="1909">玉泉营通道</option>
<option value="1910">白纸坊立交北通道</option>
<option value="1911">枣林前街西通道</option>
<option value="1912">天宁寺立交南通道</option>
<option value="1913">广安门立交北通道</option>
<option value="1914">广安门立交南通道</option>
<option value="1915">大观园通道</option>
<option value="1916">菜户营立交北通道</option>
<option value="1917">陶然桥北通道</option>
<option value="1918">陶然桥南通道</option>
<option value="1919">陶然桥东南通道</option>
<option value="1920">陶然桥西南通道</option>
<option value="1921">南二环4#通道</option>
<option value="1922">南二环5#通道</option>
<option value="1923">南二环6#通道</option>
<option value="1924">南二环3号通道</option>
<option value="1925">左安门立交西通道</option>
<option value="1926">光明桥西通道</option>
<option value="1927">右安门西通道</option>
<option value="1928">右安门东通道</option>
<option value="1929">看丹通道</option>
<option value="1930">哈德门饭店通道</option>
<option value="1931">新世界通道</option>
<option value="1932">京伦大厦通道</option>
<option value="1933">羊坊店1#通道</option>
<option value="1934">羊坊店2#通道</option>
<option value="1935">羊坊店3#通道</option>
<option value="1936">莲花池桥1#通道</option>
<option value="1937">莲花池桥3#通道</option>
<option value="1938">莲花池桥4#通道</option>
<option value="1939">正义路南延西通道</option>
<option value="1940">台基厂南延西通道</option>
<option value="1941">教场口西口北通道</option>
<option value="1942">果子巷西通道</option>
<option value="1953">四环路</option>
<option value="1954">马家堡东路</option>
<option value="1955">永定门内大街通道</option>
<option value="1976">西二环辅路</option>
<option value="1974">东二环辅路</option>
<option value="1975">东二环主路</option>
<option value="1977">西二环主路</option>
<option value="1978">北二环主路</option>
<option value="1979">北二环辅路</option>
<option value="1980">新文化街</option>
<option value="1981">北河沿大街（南段）</option>
<option value="1982">北河沿大街（北段）</option>
<option value="1853">南北线阁立交桥</option>
<option value="1993">四环辅路</option>
<option value="1994">五环辅路</option>
<option value="2013">北辰西路</option>
<option value="2033">天辰西路</option>
<option value="2034">天辰东路</option>
<option value="2035">奥林西路</option>
<option value="2036">奥林东路</option>
<option value="2053">林萃路</option>
<option value="2054">国家体育场北路</option>
<option value="2055">湖景东路</option>
<option value="2056">大屯北路</option>
<option value="2074">健翔桥</option>
<option value="2093">成府路</option>
<option value="133">西直门内大街</option>
<option value="134">平安里西大街</option>
<option value="135">车公庄大街</option>
<option value="136">西四东大街</option>
<option value="137">阜成门内大街</option>
<option value="138">阜成门外大街</option>
<option value="139">文津街</option>
<option value="140">西安门大街</option>
<option value="141">西华门大街</option>
<option value="142">月坛南街</option>
<option value="143">复兴门内大街</option>
<option value="144">复兴门外大街</option>
<option value="145">地安门西大街</option>
<option value="146">鼓楼西大街</option>
<option value="147">西长安街</option>
<option value="148">月坛北街</option>
<option value="149">复兴门南大街（内环辅路）</option>
<option value="150">复兴门南大街（外环辅路）</option>
<option value="151">复兴门北大街（内环辅路）</option>
<option value="152">复兴门北大街（外环辅路）</option>
<option value="153">阜成门南大街（内环辅路）</option>
<option value="154">阜成门南大街（外环辅路）</option>
<option value="155">阜成门北大街（内环辅路）</option>
<option value="156">阜成门北大街（外环辅路）</option>
<option value="157">西直门南大街（内环辅路）</option>
<option value="158">西直门南大街（外环辅路）</option>
<option value="159">德胜门西大街（内环辅路）</option>
<option value="160">德胜门西大街（外环辅路）</option>
<option value="161">德胜门东大街（内环辅路）</option>
<option value="162">德胜门东大街（外环辅路）</option>
<option value="163">德胜门外大街右侧辅路</option>
<option value="164">德胜门内大街</option>
<option value="165">新街口北大街</option>
<option value="166">新街口南大街</option>
<option value="392">右安门西滨河路（内环辅路）</option>
<option value="394">右安门外大街</option>
<option value="396">小屯路</option>
<option value="397">五环路北天堂村2#路</option>
<option value="398">蒲黄榆路</option>
<option value="399">南苑路</option>
<option value="400">京原路立交道路</option>
<option value="401">大灰厂东路</option>
<option value="402">周口店路</option>
<option value="403">丰葆路</option>
<option value="1">建国门南大街（主路）</option>
<option value="2">广渠门南滨河路（主路）</option>
<option value="3">永定门东滨河路（主路）</option>
<option value="4">右安门东滨河路（主路）</option>
<option value="5">广安门南滨河路（主路）</option>
<option value="6">田村路</option>
<option value="7">阜石路</option>
<option value="8">莲花池东路</option>
<option value="9">前门箭环路</option>
<option value="10">崇文门西大街</option>
<option value="11">前门东大街</option>
<option value="12">景山前街</option>
<option value="13">景山后街</option>
<option value="14">前门西大街</option>
<option value="15">宣武门西大街</option>
<option value="16">宣武门东大街</option>
<option value="17">和平里北街</option>
<option value="18">东直门外大街</option>
<option value="19">工人体育场北路</option>
<option value="20">京良路</option>
<option value="21">京榆左辅路</option>
<option value="22">京榆右辅路</option>
<option value="23">西直门外大街左侧辅路</option>
<option value="24">西直门外大街右侧辅路</option>
<option value="25">北土城西路</option>
<option value="26">永内大街东西过街道路</option>
<option value="27">建国门南大街（内环辅路）</option>
<option value="28">建国门南大街（外环辅路）</option>
<option value="29">广渠门南滨河路（外环辅路）</option>
<option value="30">永定门东滨河路（外环辅路）</option>
<option value="31">右安门东滨河路（外环辅路）</option>
<option value="32">广安门南滨河路（内环辅路）</option>
<option value="33">广安门南滨河路（外环辅路）</option>
<option value="34">和平里东街</option>
<option value="35">新街口外大街</option>
<option value="36">成寿寺路</option>
<option value="37">地安门外大街</option>
<option value="38">景山东街</option>
<option value="39">旧鼓楼大街</option>
<option value="40">人大东侧路</option>
<option value="41">地安门内大街</option>
<option value="42">三里河路</option>
<option value="43">永定门外大街</option>
<option value="44">鼓楼外大街</option>
<option value="45">东直门外斜街</option>
<option value="46">香河园路</option>
<option value="47">工人体育场西路</option>
<option value="48">马家堡东路</option>
<option value="49">万丰路</option>
<option value="50">永定路</option>
<option value="51">高梁桥路</option>
<option value="52">昌平路（左侧辅路）</option>
<option value="53">新永定门外大街</option>
<option value="54">京开左侧辅路</option>
<option value="55">京开右侧辅路</option>
<option value="56">莲宝路</option>
<option value="57">和平里西街</option>
<option value="58">景泰路</option>
<option value="59">安定门西大街（主路）</option>
<option value="60">安定门东大街（主路）</option>
<option value="61">东直门北大街（主路）</option>
<option value="62">东直门南大街（主路）</option>
<option value="63">朝阳门北大街（主路）</option>
<option value="64">建国门北大街（主路）</option>
<option value="65">朝阳门南大街（主路）</option>
<option value="66">东直门内大街</option>
<option value="67">交道口东大街</option>
<option value="68">鼓楼东大街</option>
<option value="69">东四十条</option>
<option value="70">地安门东大街</option>
<option value="71">朝阳门内大街</option>
<option value="72">东四西大街</option>
<option value="73">五四大街</option>
<option value="74">张自忠路</option>
<option value="75">东安门大街</option>
<option value="76">东华门大街</option>
<option value="77">东长安街</option>
<option value="78">北京站东街</option>
<option value="321">育慧东路</option>
<option value="322">溪阳中路</option>
<option value="323">大屯路</option>
<option value="324">宏昌路</option>
<option value="325">湖光中街</option>
<option value="326">利泽西街</option>
<option value="327">北土城东路东段</option>
<option value="328">健安东路</option>
<option value="329">新源南路</option>
<option value="330">小武基路</option>
<option value="331">万红西街</option>
<option value="332">左安路</option>
<option value="333">王四营路</option>
<option value="334">洼里三街</option>
<option value="335">溪阳东路</option>
<option value="336">坝河北路</option>
<option value="337">万红路</option>
<option value="338">七彩南路</option>
<option value="339">第三使馆区中街</option>
<option value="340">园星路</option>
<option value="341">宏泰西街</option>
<option value="342">湖光北街</option>
<option value="343">姚家园中街</option>
<option value="344">姚家园北街</option>
<option value="345">中阿公社路</option>
<option value="346">姚家园路</option>
<option value="347">利泽西二路</option>
<option value="348">利泽中二路</option>
<option value="349">青年路</option>
<option value="350">南湖南路</option>
<option value="351">望京西路</option>
<option value="352">望花街</option>
<option value="353">花家地南街</option>
<option value="354">太阳宫中路</option>
<option value="355">将台路</option>
<option value="356">西坝河路</option>
<option value="357">安贞路</option>
<option value="358">麦子店街</option>
<option value="359">金台路</option>
<option value="360">双桥路</option>
<option value="361">高碑店路</option>
<option value="362">劲松东街</option>
<option value="363">劲松中街</option>
<option value="364">广和东街</option>
<option value="365">华威路</option>
<option value="366">大羊坊路</option>
<option value="367">广顺北大街北段</option>
<option value="368">清林东路</option>
<option value="369">望京中一街</option>
<option value="370">小亮马桥路</option>
<option value="371">东坝路</option>
<option value="372">京顺路-工体西侧路</option>
<option value="373">南新园中路</option>
<option value="374">太阳宫路（新）</option>
<option value="375">京秦泵站路</option>
<option value="376">小营路</option>
<option value="377">中阿公社路-1</option>
<option value="378">望京k3--3、4、5小区路</option>
<option value="379">左安门西滨河路（主路）</option>
<option value="380">右安门西滨河路（主路）</option>
<option value="381">京石左侧辅路</option>
<option value="382">京石右辅路</option>
<option value="383">卢沟桥路</option>
<option value="384">丽泽路</option>
</select>
</td>
</table>
</div> </div>
</form>
</body>
</html>
ASP.NET 后台代码我就不贴了 直接返回JSON 格式的代码就行了
{'keylist':[{'keyname':'xxxx','keyextend':'1'},{'keyname':'xxxx','keyextend':'1'}]}
