<!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: "Are you courier?"
},
{
text: "North China Technology"
},
{
text: "Ajinfeng Technology"
},
{
text: "Ajin is on the cusp of "
},
{
text: "Send consignor"
},
{
text: "Utility bill vnk points"
},
{
text: "Publishing environment"
},
{
text: "Several finalists"
},
{
text: " Hot high-tech, you are"
},
{
text: "Dozens of pieces of moisturizing"
},
{
text: "Part of the software"
},
{
text: "Yes v flowers are blooming"
},
{
text: "And Data Phoenix Military"
},
{
text: "Volcanic eruption v is"
},
{
text: "See what Phoenix military"
},
{
text: "Working hours"
},
{
text: "Yes v is not going home"
},
{
text: "Patriotic Fukugen"
},
{
text: "Ukiyo-e Saxophone"
},
{
text: "Respond to the big words"
},
{
text: "Home in Slovakia"
},
{
text: "It's a js"
},
{
text : "Data Fox"
},
{
text: "Mobile phone number v points"
}
]
}
//////////////////////////////////////
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()//Empty the content of the ul element //Have a value Put the qualified value into a declared variable
var a = []//Initialize the a variable
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: "Are you courier?"
},
{
text: "North China Technology"
},
{
text: "Ajinfeng Technology"
},
{
text: "Ajin is on the cusp of "
},
{
text: "Send consignor"
},
{
text: "Utility bill vnk points"
},
{
text: "Publishing environment"
},
{
text: "Several finalists"
},
{
text: " Hot high-tech, you are"
},
{
text: "Dozens of pieces of moisturizing"
},
{
text: "Part of the software"
},
{
text: "Yes v flowers are blooming"
},
{
text: "And Data Phoenix Military"
},
{
text: "Volcanic eruption v is"
},
{
text: "See what Phoenix military"
},
{
text: "Working hours"
},
{
text: "Yes v is not going home"
},
{
text: "Patriotic Fukugen"
},
{
text: "Ukiyo-e Saxophone"
},
{
text: "Respond to the big words"
},
{
text: "Home in Slovakia"
},
{
text: "It's a js"
},
{
text : "Data Fox"
},
{
text: "Mobile phone number v points"
}
]
}
//////////////////////////////////////
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()//Empty the content of the ul element //Have a value Put the qualified value into a declared variable
var a = []//Initialize the a variable
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>
Note: In fact, I don't know if this is a fuzzy query, but it can also be used as an example.