<!--自动输入文本值所需的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>

autocomplete.js的使用(2):自动输入时,出现下拉选择框的更多相关文章

  1. autocomplete.js的使用(1):自动输入时,出现下拉选择框

    autocomplete.js可以实现自动输入文本值,并出现下拉框 js引用:所需要的autocomplete文件需要在网站中自行下载. <!--自动输入文本值所需的jquery文件--> ...

  2. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  3. 原生js实现一个自定义下拉单选选择框

    浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...

  4. jQuery搜索框自动补全功能插件实现-autocomplete.js

    最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...

  5. js实现文本框或文本域在用户输入时(oninput)触发事件,操作元素

    写在前面:给不同的文本框设定同样的效果,当文本框没有内容输入时,‘下一步’按钮不可用且透明度为0.5.当有内容输入时(并不是获得焦点时focus),‘下一步’按钮状态可用, 且透明度为1. <s ...

  6. jQuery UI Autocomplete是jQuery UI的自动完成组件

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...

  7. jquery autocomplete实现读取sql数据库自动补全TextBox

    转自我本良人 原文 jquery autocomplete实现读取sql数据库自动补全TextBox 项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页 ...

  8. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...

  9. Jquery autocomplete.js输入框联想补全功能

    Jquery autocomplete.js插件下载地址:http://files.cnblogs.com/files/jinzhiming/autocomplete.rar 有两种用法,一种是直接使 ...

随机推荐

  1. 97. Interleaving String *HARD* -- 判断s3是否为s1和s2交叉得到的字符串

    Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example,Given:s1 = ...

  2. 无法安装64位版本的office因为在您的pc

    无法安装64位版本的office因为在您的pcWindows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Installer\Products\00 ...

  3. 【LeetCode 222_完全二叉树_遍历】Count Complete Tree Nodes

    解法一:递归 int countNodes(TreeNode* root) { if (root == NULL) ; TreeNode *pLeft = root->left; TreeNod ...

  4. 【python】venv使用

    virtualenvwrapper 比 virualenv 好用一些. 准备 export WORKON_HOME=~/venv source /usr/bin/virtualenvwrapper.s ...

  5. [置顶] Unity2d引入新功能SpriteAtlas,Sprite新的图集方式

    孙广东  2017.8.3 http://blog.csdn.NET/u010019717 在Unity 2017.1.0f3中引入了 SpriteAtlas 官方文档:  https://docs. ...

  6. 递归遍历嵌套结构(多层List)中的元素 ------Python

    读Python基础教程(第二版)后看到了这么一个东西,就是利用递归遍历嵌套结构中的元素. 上代码: #encoding:UTF-8 def flatten(nested): try: #不要迭代类似字 ...

  7. ImportError: No module named 'serial'

    /******************************************************************************** * ImportError: No ...

  8. Error in WCF client consuming Axis 2 web service with WS-Security UsernameToken PasswordDigest authentication scheme

    13down votefavorite 6 I have a WCF client connecting to a Java based Axis2 web service (outside my c ...

  9. javascript reg 不加入分组

    from :https://stackoverflow.com/questions/3512471/what-is-a-non-capturing-group-what-does-a-question ...

  10. 在AD中存取照片

    AD中有存放照片的字段吗? 答案肯定是有的.photo,jpegPhoto,thumbnailPhoto 前端时间客户,包括领导 在问通讯录中的照片为什么存在数据库中而不是AD中,AD中的属性能不能利 ...