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>