移动端可输入的下拉选择的两个简单案例
在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:" 手动输入",
toolbarTemplate:"",
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 += "\";
}else{
html += "\";
}
html += "\" + data[i].ID + " \ \";
}
$("#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)
//}
}