1.4.4.min.js版本下拉框自带模糊搜索

最新推荐文章于 2024-07-15 11:35:22 发布

原创最新推荐文章于 2024-07-15 11:35:22 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #jquery #html

本文介绍了一个使用 jQuery EasyUI 实现的输入与选择功能示例，通过文本框输入内容后显示对应的下拉选项，并在提交前进行数据验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI-NEW1</title>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>

</head>
<body>

    <div>
        <button onclick="tijiao()">提交</button>
    </div>
   <div border="1">
        <div border="1">
        <table id="inTable" class="layouttable" border="1">
            <tr >
                <td class="layouttable_td_label" >---</td>
                <td >
                        <div style="height:30px"><input type="text" name="makeupCo" id="makeupCo" style="width: 250px;" onFocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入"/><br/><select name="makeupCoSe" multiple="false" size="10" id="typenum" onchange="changeF(this)" style="display:none; width:250px;position:relative;">
                            <option value="11">中国</option>
                            <option value="22">法国</option>
                            <option value="33">德国</option>
                            <option value="44">英国</option>
                            <option value="55">中国的台湾</option>
                            <option value="66">中国的钓鱼岛</option>
                            <option value="77">俄罗斯</option>
                            <option value="88">韩国</option>
                        </select></div>
                </td>
                <td ><input type="text" name="name" value="zhongguo ren "/></td>
            </tr>
            <tr >
                <td >---</td>
                <td><input type="text" name="name" value="zhongguo ren "/></td>
                <td ><select><option value="11">中国</option><option value="22">法国</option></select></td>
            </tr>
        </table>
        </div>
   </div>
<script>
function tijiao(){
    var value = $("#typenum").val();
//提交之前，如果input框里面有数据，则需要获取相对应第一个的value
var makeupCoValue = $("#makeupCo").val();
if(makeupCoValue!=null && makeupCoValue!='' && (value==null || value=='')){
   for(i=0;i<TempArr.length;i++){
        if(TempArr[i].indexOf(makeupCoValue)>-1){//表示从大于-1下表位置开始匹配
           value = array[i];
           $("#makeupCo").val(TempArr[i]);
           break;
        }
    }
}
    location.href="tijiao?makeupCoSe="+value;
}
    var TempArr=[];//存储option
    var array = [];//存储code
$(function(){
$("#makeupCo").val($("#typenum").find("option:selected").text());
    //先将数据存入数组
    $("#typenum option").each(function(index, el) {
        TempArr[index] = $(this).text();
        array[index] = $(this).val();
    });
    $(document).bind('click', function(e) {
        var e = e || window.event; //浏览器兼容性
        var elem = e.target || e.srcElement;
        while (elem) { //循环判断至跟节点，防止点击的是div子元素
            if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {
                return;
            }
            elem = elem.parentNode;
        }
        $('#typenum').css('display', 'none'); //点击的不是div或其子元素
    });
})

function changeF(this_) {
    $(this_).prev().children("input").val($(this_).find("option").text());
    $("#typenum").css({"display":"none"});
//给input设置值
$("#makeupCo").val($("#typenum").find("option:selected").text());
}

</body>
</html>