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>

 

posted @ 2017-09-12 14:43  ly77461  阅读(2344)  评论(0编辑  收藏  举报