JQ文本框点击出现下拉（模糊查询，搜索框等可套用）

最新推荐文章于 2021-03-11 18:43:10 发布

原创最新推荐文章于 2021-03-11 18:43:10 发布 · 2.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

jQuery 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何利用jQuery实现点击文本框后显示下拉菜单，进行模糊查询的功能。通过示例代码展示了HTML结构、CSS样式初始化及JavaScript事件处理，适合用于创建搜索框或其他需要类似交互的场景。

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

点击前
这里写图片描述

点击时
这里写图片描述

点击后
这里写图片描述

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/css.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <section class="menu">
            <div>
                <input type="text" name="menu_a" id="menu_a"onfocus="if(this.value=='作者')this.value=''" value="作者" maxlength="10"/>
            </div>
            <ul>
                <li>作者1</li>
                <li>作者2</li>
                <li>作者3</li>
                <li>作者4</li>
            </ul>
        </section>
        <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
        <script type="text/javascript" src="js/style.js"></script>
    </body>
</html>

css初始化文件（网上找的）

/* CSS Document */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    outline-style: none;
    /*FF浣跨敤*/
}

body {
    line-height: 1;
}

a {
    color: #696969;
    text-decoration: none;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

a:hover,
a:focus {
    text-decoration: none;
    bblr: expression(this.onFocus=this.blur());
    /*IE浣跨敤*/
    outline-style: none;
    /*FF浣跨敤*/
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input,
select {
    vertical-align: middle;
}

ul,
li {
    list-style-type: none;
}

css

.menu{
    width: 150px;
    border: 1px solid #ccc;
    margin: 50px auto;
}

.menu:hover{
    cursor: pointer;
}

.menu div{
    height: 30px;
    line-height: 30px;
}

.menu div input{
    width: 150px;
    height: 28px;
    text-indent: 3px;
    position: relative;
    left: 0px;
    top: -2px;
    border: none;
}

.menu ul{
    display: none;
}

.menu ul li{
    padding-left: 3px;
    line-height: 30px;
    height: 30px;
}

var menu_div =  $(".menu div");
var menu_input = $("#menu_a");
var menu_ul = $(".menu ul");
var menu_li = $(".menu ul li");

/*点击出现子菜单*/
menu_div.click(function(){
    if(menu_ul.is(":visible") == true){
        $(this).css("border","none");
        menu_ul.css("display","none");
    }else{
        $(this).css("borderBottom","1px solid #ccc");
        menu_ul.css("display","block");
    }z
});

/*点击子菜单获取文本并替换主菜单内容*/

menu_li.click(function(){
    menu_div.css("border","none");
    menu_input.val($(this).text()); 
    menu_ul.css("display","none");
});

/*文本外点击隐藏菜单*/

$(document).bind("click",function(e){
    var target = $(e.target);
    if(target.closest(".menu").length == 0){//点击id为sibader之外的地方触发
        menu_div.css("border","none");
        menu_ul.css("display","none");
    }
})