select下拉框可以输入 

<!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>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>jQuery插件jquery.editable-select可输入的下拉框</title>
<script src="../src/js/jquery.js" ></script>
<script src="../src/js/jquery.editable-select.js" ></script>
<!--一定要引入这个css，不然下拉内容会移位-->
<link  rel="stylesheet"  type="text/css"  href="../src/css/jquery.editable-select.css"/>
</head>
<body>
     <div>
         <label  for="name" >未过滤的用户名</label>
         <select name="drpPublisher"  id="drpPublisher"  class="Winstar-input120">

			<option value="3734">amo12</option>
		
			<option value="1031">a8181</option>
		       		 		
		       		 	
		       </select>
		    
       </div>
   
       
       
      
</body>
<script  type="text/javascript" >
$(function() {
   $('#drpPublisher').editableSelect(
     {
       bg_iframe: true,
       onSelect: function(list_item) {
         // 'this' is a reference to the instance of EditableSelect
         // object, so you have full access to everything there
         $('#ddd').val(this.text.val());
       },
       case_sensitive: false, // If set to true, the user has to type in an exact
                              // match for the item to get highlighted
       items_then_scroll: 10 ,// If there are more than 10 items, display a scrollbar
       isFilter:false //If set to true, the item will be filtered according to the matching criteria.
     }
   );
});
</script>
</html>
控件下载地址：https://github.com/indrimuska/jquery-editable-select

　　

posted @ 2018-05-11 09:35  西湖看雪  阅读(470)  评论(0)    收藏  举报