autocomplete.js的使用（2）：自动输入时，出现下拉选择框

<!--自动输入文本值所需的jquery文件--><script src="/js/jquery-1.8.3.min.js" type="text/JavaScript"></script><script type="text/javascript" src="../AjaxJs/jQueryAutocompletePlugin-master/jquery.autocomplete.min.js"></script><link rel="stylesheet" type="text/css" href="../AjaxJs/jQueryAutocompletePlugin-master/jquery.autocomplete.css"/><script language="JavaScript" type="text/JavaScript">

   //如下是处理IE中indexOf不兼容的定义方法
	if(!Array.indexOf)
	{
	   Array.prototype.indexOf = function(obj){

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

	            if(this[i]==obj){return i;}
	        }
	        return -1;citynames
	    }
	}
	

//添加节点：开始
$(document).ready(function(){


                 /*根据输入内容动态加载：*/
				 
                //citynames :开始	
                $("#citynames").autocomplete("/tools/TicketPlan/view/InloadMiojiCity.asp",{
                          minChars: 1,//自动完成激活以前填入的最小字符
                          max:100,//列表条目数
                          width: 500,//提示的宽度
                          mustMatch: true,
                          scrollHeight: 500,//提示的高度
                          matchContains: true,//是否只要包含文本框里的就能够
                          autoFill:true,//自动填充
						  scroll:true,
						  dataType: "json",
						  pagingMore:true,
						  parse: function(data) {
								   return $.map(data, function(row) {
									return {
									 data: row,
									 value: row.id,
									 result: row.cname
									}
								   });
						  },
                          formatItem: function(data, i, max) {//格式化列表中的条目 row:条目对象,i:当前条目数,max:总条目数
                            return  data.cname;
                                        },
                                        formatMatch: function(data, i, max) {//配合formatItem使用，做用在于，因为使用了formatItem，因此条目中的内容有所改变，而咱们要匹配的是原始的数据，因此用formatMatch作一个调整，使之匹配原始数据
										 return  data.cname;
                                        },
                                        formatResult: function(data) {//定义最终返回的数据，好比咱们仍是要返回原始数据，而不是formatItem过的数据
                                         return  data.cname;
                                        }
                                    }).result(function(event,data,formatted){
                                        $("#citynames").val('');
										    var SelectHtml="<div style='overflow:hidden;margin-right:8px;margin-bottom:8px;background-color: #eaf9fe;border: 1px solid transparent;display: flex;justify-content: center;float:left;padding: 5px;border-radius: 2px;'><select class='mdd_sel' style='float: left;width: 50px;color: rgb(102, 140, 197);'>";
											 SelectHtml+="<option value='"+0+"'>不过夜</option>";
                                            for(var j=1;j<=30;j++)
                                            {
												if(j==1){
													 SelectHtml+="<option selected value='"+j+"'>"+j+"晚</option>";
													}else{
													
														 SelectHtml+="<option  value='"+j+"'>"+j+"晚</option>";
														}
                                            }
                                            SelectHtml+="</select>";
										  
                                          $("#DivCityNames").append(''+SelectHtml+''+'<p id=p'+data.id+' class="creat_p"><span id="'+data.id+'" class="creat_span">'+data.cname+'</span><a href="javascript:;" style="line-height:28px;color:#668cc5;position:absolute;right:-3px;top:-1px;width:20px;height:30px;text-align:center;cursor:pointer;font-size:10px;">X</a></p></div>');

                                    });
               //citynames :结束	
			   
			   
			/*删除城市：开始*/
		   $('.span_box a').live('click',function(){
				  $(this).parent().parent().remove();
            });
			/*删除城市：结束*/

		 
		 
		 

/*一次加载、屡次使用：*/

            //$.ajax({
//               url:"/tools/TicketPlan/view/InloadMiojiCity.asp",
//               type:"get",  
//			   dataType:"json",
//			   cache: false,
//               success:function(result){
//			   
//			     var data =result;
			   
			  
			  //citynames :开始	
               // $("#citynames").autocomplete(data,{
//                        minChars: 1,//自动完成激活以前填入的最小字符
//                          max:100,//列表条目数
//                          width: 500,//提示的宽度
//                          mustMatch: true,
//                          scrollHeight: 500,//提示的高度
//                          matchContains: true,//是否只要包含文本框里的就能够
//                          autoFill:false,//自动填充
//						  scroll:true,
//						  pagingMore:true,
//                          formatItem: function(data, i, max) {//格式化列表中的条目 row:条目对象,i:当前条目数,max:总条目数
//                            return  data.cname;
//                                        },
//                                        formatMatch: function(data, i, max) {//配合formatItem使用，做用在于，因为使用了formatItem，因此条目中的内容有所改变，而咱们要匹配的是原始的数据，因此用formatMatch作一个调整，使之匹配原始数据
//                            return data.cname + data.ename;
//                                        },
//                                        formatResult: function(data) {//定义最终返回的数据，好比咱们仍是要返回原始数据，而不是formatItem过的数据
//                            return data.ename;
//                                        }
//                                    }).result(function(event,data,formatted){
//                                        $("#citynames").val('');
//										    var SelectHtml="<div style='overflow:hidden;margin-right:8px;margin-bottom:8px;background-color: #eaf9fe;border: 1px solid transparent;display: flex;justify-content: center;float:left;padding: 5px;border-radius: 2px;'><select class='mdd_sel' style='float: left;width: 50px;color: rgb(102, 140, 197);'>";
//											 SelectHtml+="<option value='"+0+"'>不过夜</option>";
//                                            for(var j=1;j<=30;j++)
//                                            {
//												if(j==1){
//													 SelectHtml+="<option selected value='"+j+"'>"+j+"晚</option>";
//													}else{
//													
//														 SelectHtml+="<option  value='"+j+"'>"+j+"晚</option>";
//														}
//                                            }
//                                            SelectHtml+="</select>";
//										  
//                                          $("#DivCityNames").append(''+SelectHtml+''+'<p id=p'+data.id+' class="creat_p"><span id="'+data.id+'" class="creat_span">'+data.cname+'</span><a href="javascript:;" style="line-height:28px;color:#668cc5;position:absolute;right:-3px;top:-1px;width:20px;height:30px;text-align:center;cursor:pointer;font-size:10px;">X</a></p></div>');
//
//                                    });
               //citynames :结束	
             //  }
//			   
//            });

            /*自动选择城市：结束*/
           
})


             /*获取城市天数：开始*/
			function CityNamesDays()
			{
			   var cityarray=[];
		       var dayids=[];
			   var citynames=[];
		   
              /*自动选择城市：开始*/
              var Input_cityids=document.getElementById('cityids');
			  var Input_dayids=document.getElementById('dayids');
			  var input_wanshu=0;
			    for (var i = 0; i < $("#DivCityNames").children("div").length;i++)
                  {
				     var day= $("#DivCityNames").children("div").eq(i).find("select").val();
					 //获取选中天数
					 dayids.push(day);
					 input_wanshu= input_wanshu+parseInt(day);
					 var city= $("#DivCityNames").children("div").eq(i).find("p").children("span").attr("id");
					 var cityname= $("#DivCityNames").children("div").eq(i).find("p").children("span").text();
				     cityarray.push(city);
					 citynames.push(cityname);
				  }
				  Input_dayids.value=dayids.join(",");
				  Input_cityids.value=cityarray.join(",");
				  document.getElementById('tz_visitcity').value=citynames.join(",");
				  document.getElementById('nights').value=input_wanshu;
				  
			}
			/*获取城市天数：结束*/

//添加节点：结束

</script>