移动端可输入的下拉选择的两个简单案例

在pc端,如果既有下拉,也有可输入,有好多种实现方式,比如输入联想,eysui的combobox框.

不过,在做移动端时,由于经验原因,我并没有找到既能输入也可以选择的框架.因此,只能手动实现了.

第一种,这种原来只是单纯的下拉选择,所以我直接使用的是weui中的Select 功能.不过,后来用户觉得只有下拉不行,万一下拉列表中没有的话,怎么办.于是,用户要求如果下拉没有的,希望能够手工录入.
其实,这种情况下,只要加个再input就行了,我的做法也是如此,加个input,只不过我这种做法看起来好看,却有些自找麻烦了
我的做法就是在select中加个手工录入按钮,如果用户点了它,跳出一个输入框,用户输入数据,然后将用户录入的数据写到对应的字段中.其实,这用input做起来要简单多了,只需要加个onflur或onchange事件,

//应对当选择列表中没有时,需要手动输入

function setProTypeValue() {
	var url = encodeURI(url);
	$.get(url, function(data) {
		//alert(children)
		var json05 = [];
		for(var i = 0; i < data.length; i++) {
			var jsonele0502 = {
				title: data[i].text,
				value: data[i].value

			};
			json05.push(jsonele0502);
		}
		$("#ID").select({
			//input:pro_type,
			//input:"ssss",
			//title: "选择",
			items: json05,
			//closeText:" <div οnclick=\"openModel('modelPalce','pro_type')\">手动输入</div>",
			toolbarTemplate:"<div class=\"toolbar\"><div class=\"toolbar-inner\">"+
			
			"<a href=\"javascript:;\" class=\"picker-button close-select\" style=\"right: 0;\">关闭</a> "+
			"<h1 class=\"title\">选择</h1>"+
			 "<a href=\"javascript:;\" class=\"picker-buttonNew close-select\" οnclick=\"openModel('model')\" style=\"left: 0;\">手动输入</a>"+
			"    </div>      </div>",
			onOpen:function(){
				var  id=g("ID");
				if(id==""){
					$("#ID").val(oldID);//防止下次点击选择弹框时,将旧数据清除
				}
				
			}
		});
	}, "json")
}
var oldID="";


function ConfirmYY() {
	var jyyrrTT = $("#jyyrrTT").val();
	if(jyyrrTT.trim()!=""){
		$("#ID").val(jyyrrTT)
		oldID=jyyrrTT;
	}
	
	$("#model").hide();
	showBtn()
}





<div class="weui-picker-container-new  weui-picker-container-visible-new" style="display:none" id="nodel" onclick="closeA1()">
					<div class="weui-picker-modal-new weui-picker-modal-visible-new" style="height:200px" onclick="close1(1)">
						<div class="toolbar" style="height:40px">
							<div class="toolbar-inner">
								<h1 class="title">
                                   内容填写
                                </h1>
							</div>
						</div>
						<div class="picker-modal-inner " style="height:120px">

							<textarea class="weui-textarea" rows="5" id="jyyrrTT" placeholder="请输入内容"></textarea>

						</div>

						<div class="toolbar" style="height:40px">
							<div class="toolbar-inner">
								<a href="javascript:;" class="picker-buttonNew" style="right: 0;" onclick="ConfirmYY()">确定</a>
								<a href="javascript:;" class="picker-buttonNew close-picker" style="left: 0;" onclick="closeModel('model')">取消</a>
							</div>
						</div>
					</div>
				</div>

第二种,这种和上面的情况不一样,原来是一个input框,用户输入后,利用事件去后端取值,再反写.可惜,有时候用户记不清自己要填写的具体内容,只有模糊概念.所以,就要做个类似联想的功能.
为了方便,因为我原来的表单就有自定义的模态框,因此我用模态框给他做了一个模糊查询更新选择项的功能.这种功能,其实在移动端很常见.没什么好说的.而且,他们做的比我这个好多了.
思路很简单,就是一个模态框,一个输入框,用来输入查询的数据,给它个事件去更新下拉选项;输入框下,就是所谓的下拉选项了.

//应对下拉列表太多,一边输入,一边删选符合的项


	<div class="weui-picker-container-new  weui-picker-container-visible-new" style="display:none" id="model" onclick="closeA1()">
					<div class="weui-picker-modal-new weui-picker-modal-visible-new" style="height:400px" onclick="close1(1)">
						<div class="toolbar" style="height:10%">
							<div class="toolbar-inner">
								<h1 class="title">
                                   选择
                                </h1>
							</div>
						</div>

						<div class="picker-modal-inner " style="height:80%">
							<div class="weui-search-bar" id="searchBar">
								<div class="weui-search-bar__form">
									<div class="weui-search-bar__box">
										<i class="weui-icon-search"></i>
										<input type="text" class="weui-search-bar__input" id="searchInput" placeholder="请输入编号进行搜索" required="" onkeyup="search()">
										<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
									</div>

								</div>
								<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
							</div>

							<div class="weui-flex divtable">
								<div>
									列表
								</div>

							</div>

							<div id="selectList" style="overflow:scroll; height:290px; overflow-x: hidden;"></div>
						</div>
					</div>
				</div>




function getYYList(fdval) {

	if(setfdval == fdval) {
		return;
	}

	setfdval = fdval;
	var html = "";

	$.post("url", {
		"fdval": fdval  //查询条件
	}, function(data) {
		for(var i = 0; i < data.length; i++) {
			//appNo,appShort,appName,managerPy

			var jsona = JSON.stringify(data[i]);
			if(i%2!=0){
				html += "\<div class = \"weui-flex divtable\"onclick = 'selectYingYong(" + jsona + ")'  style=\"background-color:#87CEFA;\">";
				
			}else{
				html += "\<div class = \"weui-flex divtable\"onclick = 'selectYingYong(" + jsona + ")' >";
			}
			html += "\<div>" + data[i].ID + " \</div> \</div>";
		}
		$("#selectList").html(html);
		getl = 1;
	}, "json");

}

function openMOdel(){
	$("#model").show();
	hideBtn()
}
//应用选择后赋值
function selectYingYong(data) {
	//data 是一个json对象  直接通过data.XXX得到对应的值
	//赋值操作
	$("#model").hide()
	showBtn();//主表单可滑动编辑
	
}


//ios兼容性问题

var hideCss={
	"overflow": "hidden",
    "overflow-x":"hidden",
    "overflow-y":"hidden"
}
var showCss={
	"overflow": "",
    "overflow-x": "",
    "overflow-y": ""
}
function hideBtn(){
	$("#parent").css(hideCss);  
}

function showBtn(){
	$("#parent").css(showCss);  
}

function closeA1() {
	if(mp1 == "") {
		$("#model").hide();
		showBtn()
	  }
	}
	mp1 = "";
}

function close1(val) {
	mp1 = val;
}

//查询
function searchYY(){
	 //if (event.keyCode == "13") {//keyCode=13是回车键；数字不同代表监听的按键不同
        //alert("搜索:"+g("searchInput"))
        var searchInput=$("#searchInput").val()
        if(searchInput==""||searchInput==null){
        	searchInput="";
        }
        getYYList(searchInput)
    //}
}