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

最新推荐文章于 2023-02-06 16:55:13 发布

VIP文章从基本的安装开始

最新推荐文章于 2023-02-06 16:55:13 发布

阅读量2k

点赞数 1

分类专栏：前端学习文章标签： javascript 可选输入框

本文链接：https://blog.csdn.net/qq_36230119/article/details/68924700

版权

项目上要实现既可以输入又可以选择的输入框类似于百度的搜索自动提示
实现代码如下
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);