<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模糊查询</title>
</head>
<style type="text/css">
.enquiries-ul {
width: 200px;
height: 200px;
overflow: auto;
border: 1px solid black;
list-style: none;
margin: 0px;
padding: 0px;
}
</style>
<body>
<div class="enquiries">
<input class="enquiries-input" type="text" name="" id="" value="" />
<ul class="enquiries-ul"></ul>
</div>
</body>
<script src="jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function () {
var data = {
html: [{
text: "快递你是否"
},
{
text: "华北科技"
},
{
text: "啊金风科技"
},
{
text: "阿金风口浪尖"
},
{
text: "发送发货人"
},
{
text: "水电费vnk积分"
},
{
text: "发布环境"
},
{
text: "入围奖好几款"
},
{
text: "热高科技你是"
},
{
text: "润发几十块"
},
{
text: "化部分软件"
},
{
text: "是v繁花似锦"
},
{
text: "和数据凤凰军事"
},
{
text: "火山爆发v就是"
},
{
text: "看见啥凤凰军事"
},
{
text: "上班时间"
},
{
text: "是v回不回家是"
},
{
text: "爱国福元"
},
{
text: "浮世绘萨克斯"
},
{
text: "话回复大"
},
{
text: "家斯诺伐克"
},
{
text: "是个一js"
},
{
text: "数据福克斯"
},
{
text: "手机号v积分"
}
]
}
///////////////////////////////////////
var html = data.html
var inpval = $(".enquiries-input").val()
//全部显示数据
for (var i = 0; i < html.length; i++) {
var text = html[i].text
// console.log(text)
$(".enquiries-ul").append("<li class='enquiries-li'>" + text + "</li>")
}
$(".enquiries-li").click(function () {
var val = $(this).text()
console.log(val)
$(".enquiries-input").val(val)
})
/////////////////
$(".enquiries-input").bind("input", function () {
var inpval = $(".enquiries-input").val()
//判断输入框是否有值
if (inpval) {
$(".enquiries-ul").empty()//清空ul元素内容
var a = []//初始化a变量
//有值 把符合条件的值放入一个声明的变量
for (var i = 0; i < html.length; i++) {
var text = html[i].text
var indexof = text.indexOf(inpval)
// console.log(indexof)
if (indexof > -1) {
a.push(text)
} else {
}
}
//循环显示符合条件的值
for (var i = 0; i < a.length; i++) {
var text = a[i]
$(".enquiries-ul").append("<li class='enquiries-li'>" + text + "</li>")
}
$(".enquiries-li").click(function () {
var val = $(this).text()
console.log(val)
$(".enquiries-input").val(val)
})
} else {
//没有值 全部显示数据
$(".enquiries-ul").empty()
for (var i = 0; i < html.length; i++) {
var text = html[i].text
$(".enquiries-ul").append("<li class='enquiries-li'>" + text + "</li>")
}
$(".enquiries-li").click(function () {
var val = $(this).text()
console.log(val)
$(".enquiries-input").val(val)
})
}
})
})
</script>
<html>
<head>
<meta charset="UTF-8">
<title>模糊查询</title>
</head>
<style type="text/css">
.enquiries-ul {
width: 200px;
height: 200px;
overflow: auto;
border: 1px solid black;
list-style: none;
margin: 0px;
padding: 0px;
}
</style>
<body>
<div class="enquiries">
<input class="enquiries-input" type="text" name="" id="" value="" />
<ul class="enquiries-ul"></ul>
</div>
</body>
<script src="jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function () {
var data = {
html: [{
text: "快递你是否"
},
{
text: "华北科技"
},
{
text: "啊金风科技"
},
{
text: "阿金风口浪尖"
},
{
text: "发送发货人"
},
{
text: "水电费vnk积分"
},
{
text: "发布环境"
},
{
text: "入围奖好几款"
},
{
text: "热高科技你是"
},
{
text: "润发几十块"
},
{
text: "化部分软件"
},
{
text: "是v繁花似锦"
},
{
text: "和数据凤凰军事"
},
{
text: "火山爆发v就是"
},
{
text: "看见啥凤凰军事"
},
{
text: "上班时间"
},
{
text: "是v回不回家是"
},
{
text: "爱国福元"
},
{
text: "浮世绘萨克斯"
},
{
text: "话回复大"
},
{
text: "家斯诺伐克"
},
{
text: "是个一js"
},
{
text: "数据福克斯"
},
{
text: "手机号v积分"
}
]
}
///////////////////////////////////////
var html = data.html
var inpval = $(".enquiries-input").val()
//全部显示数据
for (var i = 0; i < html.length; i++) {
var text = html[i].text
// console.log(text)
$(".enquiries-ul").append("<li class='enquiries-li'>" + text + "</li>")
}
$(".enquiries-li").click(function () {
var val = $(this).text()
console.log(val)
$(".enquiries-input").val(val)
})
/////////////////
$(".enquiries-input").bind("input", function () {
var inpval = $(".enquiries-input").val()
//判断输入框是否有值
if (inpval) {
$(".enquiries-ul").empty()//清空ul元素内容
var a = []//初始化a变量
//有值 把符合条件的值放入一个声明的变量
for (var i = 0; i < html.length; i++) {
var text = html[i].text
var indexof = text.indexOf(inpval)
// console.log(indexof)
if (indexof > -1) {
a.push(text)
} else {
}
}
//循环显示符合条件的值
for (var i = 0; i < a.length; i++) {
var text = a[i]
$(".enquiries-ul").append("<li class='enquiries-li'>" + text + "</li>")
}
$(".enquiries-li").click(function () {
var val = $(this).text()
console.log(val)
$(".enquiries-input").val(val)
})
} else {
//没有值 全部显示数据
$(".enquiries-ul").empty()
for (var i = 0; i < html.length; i++) {
var text = html[i].text
$(".enquiries-ul").append("<li class='enquiries-li'>" + text + "</li>")
}
$(".enquiries-li").click(function () {
var val = $(this).text()
console.log(val)
$(".enquiries-input").val(val)
})
}
})
})
</script>
</html>
注：其实我也不知道这是不是模糊查询 不过也可以当个例子看看