您的位置：首页 > Web前端 > JavaScript

js 小功能 实现可选可输入的功能

2017-03-31 14:18 537 查看
项目上要实现既可以输入又可以选择的输入框类似于百度的搜索自动提示

实现代码如下

searchSelect.js

var flag = false;//标记点击也面时输入框下方的div是否消失
var selectOptions = null;//输入框提示的option数组
function inputSelect(){
if(arguments.length == 0 ){
alert("未传入参数");
return ;
}
if(typeof arguments[0] != "string"){
alert("第一个参数请传入字符串");
}
var reg = /[#\.]?./;
if(!reg.test(arguments[0])){
alert("输入参数表达式不正确");
return ;
}
var select = $(arguments[0]);
//给selectInput添加输入框内文本改变事件在IE下为oninput在其他浏览器下为onpropertychange
var selectInput = "<input id='" + "selectInputClone" + "'  oninput='onInput(this);' onpropertychange='onPropertyChange(this);'  type='text' name='" + select.attr("name") + "'></input>";
var selectDiv = "<div id='" + "selectDiv" + "'></div>";
var selectOption_ = select.find("option");
selectOptions = new Array(selectOption_.length);
var childrenOption = null;
for(var i = 0; i < selectOption_.length; i++){
childrenOption = selectOption_.get(i);
//alert(childrenOption);操蛋jquery的查找语句找出来的是DOM对象而不是jquery对象
selectOptions[i] = $(childrenOption);
}
//移除原生的select,添加新的input
select.before(selectInput);
select.after(selectDiv);
select.remove();
var selectInputClone = $("#selectInputClone");
var left = selectInputClone.offset().left;
var top = selectInputClone.offset().top + selectInputClone.height() + 5;
var width = selectInputClone.width();
$("#selectDiv").css({
"position":"absolute",
"top":top,
"left":left,
"width":width,
"border":"1px solid #aaaaaa",
"display":"none"
})

//文本框单击事件
selectInputClone.click(function(){
var selectDiv = $("#selectDiv");
selectDiv.empty();
var selectInputVal = selectInputClone.val();
//输入框内未填入信息是下方提示
if(selectInputVal == "undefined" || selectInputVal == "null" || selectInputVal == "" ){
for(var i = 0 ; i < selectOptions.length ; i++ ){
selectDiv.append("<span class='selectSpan' onclick='chooseOption(this);' onmouseover='mi();' onmouseout='mo();' value='" + selectOptions[i].val() + "'>" + selectOptions[i].text() + "</span><br>");
}
selectDiv.show();
return;
}
//输入框内有数据时下方提示
var matchOption = selectOptions.filter(function(item,index,array){
var regExpStr = "";
for(var i = 0; i < selectInputVal.length; i++){
regExpStr += "[" + selectInputVal.charAt(i) + "]+";
}
var reg = new RegExp(regExpStr);
if(reg.test(item.val())){
return true;
}else{
return false;
}
});
for(var i = 0 ; i < matchOption.length ; i++ ){
selectDiv.append("<span class='selectSpan' onclick='chooseOption(this);' onmouseover='mi();' onmouseout='mo();' value='" + matchOption[i].val() + "'><b>" + matchOption[i].text() + "</b></span><br>");
}
selectDiv.show();
return;
})

//文本框失去焦点事件
selectInputClone.focusout(function(){
if(!flag)
$("#selectDiv").hide();
})

}

//下方span单击事件
function chooseOption(obj){
$("#selectInputClone").val($(obj).attr("value"));
$("#selectDiv").hide();
}

//span鼠标进入事件
function mi(){
flag = true;
}
//鼠标移除事件
function mo(){
flag = false;
}
//IE下的文本框改变事件
function onInput(obj){
changeSelectDivOption(obj);
}
//其他文本框内容改变事件
function onPropertyChange(obj){
changeSelectDivOption(obj);
}

function changeSelectDivOption(obj){
$("#selectDiv").empty();
var va = $(obj).val();
if(va == ""){
selectOptions.forEach(function(item,index,array){
$("#selectDiv").append("<span class='selectSpan' onclick='chooseOption(this);' onmouseover='mi();' onmouseout='mo();' value='" + item.val() + "'><b>" + item.text() + "</b></span><br>");
});
}else {
var regStr = "";
for ( var i = 0; i < va.length ; i++){
regStr += "[" + va.charAt(i) + "]+";
}
//这里写$.ajax()异步请求扩充selectOptions数组，selectOptions内未option对象，也就是说，如果是json的话要将json转为option的jqery对象数组

var reg = new RegExp(regStr);
selectOptions.forEach(function(item,index,array){
if(reg.test(item.val())){
$("#selectDiv").append("<span class='selectSpan' onclick='chooseOption(this);' onmouseover='mi();' onmouseout='mo();' value='" + item.val() + "'><b>" + item.text() + "</b></span><br>");
}
});

//这里可以遍历新的异步请求数组照上面写
}

}

//1.初始化
inputSelect("#selectInput");


searchSearch.html

<html>
<head>
<title>双重输入框</title>
<style>
#selectDiv span{
display:-moz-inline-box;
display:inline-block;
width:100%
}
#selectDiv span:hover{
background-color:#aaaaaa
}
</style>
</head>
<body>
<label>请输入：</label>
<select id="selectInput" name="selectInput">
<option value="张三">张三</option>
<option value="王五">王五</option>
<option value="赵六">赵六</option>
<option value="张三三">张三三</option>
<option value="张三六">张三六</option>
</select>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="searchSelect.js"></script>
<body>
</html>


我要自己造轮子，我还要造汽车，加油！！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 可选输入框
相关文章推荐
新的分享
章节导航