JS仿百度自动下拉框模糊匹配提示
实际项目中，我们可以把数据获取改成ajax动态获取，在 getContent()中
<!DOCTYPE>
<html>
<head>
<title>js/jQuery实现类似百度搜索功能</title>
<meta name="Author" content="Michael">
<meta name="Keywords" content="js/jQuery实现类似百度搜索功能">
<meta name="Description" content="js/jQuery实现类似百度搜索功能,可用键盘控制">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
#container {
position: absolute;
left: 50%;
top: 40%;
}
#content {
float: left;
position: relative;
right: 50%;
}
input {
border: 0;
width: 288px;
height: 30px;
font-size: 16px;
padding: 0 5px;
line-height: 30px;
}
.item {
padding: 3px 5px;
cursor: pointer;
}
.addbg {
background: #87A900;
}
.first {
border: solid #87A900 2px;
width: 300px;
}
#append {
border: solid #87A900 2px;
border-top: 0;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="first">
<input id="kw" onKeyup="getContent(this);" />
</div>
<div id="append"></div>
</div>
</div>
<script type="text/javascript">
var data = [
"你好，我是Michael",
"你是谁",
"你最好啦",
"你最珍贵",
"你是我最好的朋友",
"你画我猜",
"你是笨蛋",
"你懂得",
"你为我着迷",
"你是我的眼"
];
$(document).ready(function() {
$(document).keydown(function(e) {
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if (keycode == 38) {
if (jQuery.trim($("#append").html()) == "") {
return;
}
movePrev();
} else if (keycode == 40) {
if (jQuery.trim($("#append").html()) == "") {
return;
}
$("#kw").blur();
if ($(".item").hasClass("addbg")) {
moveNext();
} else {
$(".item").removeClass('addbg').eq(0).addClass('addbg');
}
} else if (keycode == 13) {
dojob();
}
});
var movePrev = function() {
$("#kw").blur();
var index = $(".addbg").prevAll().length;
if (index == 0) {
$(".item").removeClass('addbg').eq($(".item").length - 1).addClass('addbg');
} else {
$(".item").removeClass('addbg').eq(index - 1).addClass('addbg');
}
}
var moveNext = function() {
var index = $(".addbg").prevAll().length;
if (index == $(".item").length - 1) {
$(".item").removeClass('addbg').eq(0).addClass('addbg');
} else {
$(".item").removeClass('addbg').eq(index + 1).addClass('addbg');
}
}
var dojob = function() {
$("#kw").blur();
var value = $(".addbg").text();
$("#kw").val(value);
$("#append").hide().html("");
}
});
function getContent(obj) {
var kw = jQuery.trim($(obj).val());
if (kw == "") {
$("#append").hide().html("");
return false;
}
var html = "";
for (var i = 0; i < data.length; i++) {
if (data[i].indexOf(kw) >= 0) {
html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + data[i] + "</div>"
}
}
if (html != "") {
$("#append").show().html(html);
} else {
$("#append").hide().html("");
}
}
function getFocus(obj) {
$(".item").removeClass("addbg");
$(obj).addClass("addbg");
}
function getCon(obj) {
var value = $(obj).text();
$("#kw").val(value);
$("#append").hide().html("");
}
</script>
</body>
</html>
以上所述是小编给大家介绍的JS仿百度自动下拉框模糊匹配提示，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
-
本文向大家介绍使用Ajax模仿百度搜索框的自动提示功能实例，包括了使用Ajax模仿百度搜索框的自动提示功能实例的使用技巧和注意事项，需要的朋友参考一下 啊啊，熬夜了。今天学习了ajax给我的感觉就是，”哇塞“ajax好酷炫哦，（额。。。后端狗，接触到了大前端的魅力了），这么晚了还是直奔主题把。Let's go! 百度搜索提示框，我想大家都很熟悉了把，是什么样子我也就不再赘述。直接看代码 来我们写一
-
本文向大家介绍Jquery插件仿百度搜索关键字自动匹配功能，包括了Jquery插件仿百度搜索关键字自动匹配功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Jquery搜索关键字自动匹配功能的实现代码，供大家参考，具体内容如下 jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件，该插件可扩展性强，表现性能优越，方便整合到自己的项目中使用；
-
问题内容： 我正在使用SQL Server 2008 R2 SP1。 我有一张约有36034个客户记录的表。我正在尝试在“客户名称”字段上实施Fuzy搜索。 这是模糊搜索的功能 这是调用该函数的查询 这大约需要2分22秒，可以为我提供所有对象的模糊匹配百分比 我如何解决此问题以在不到一秒钟的时间内运行。关于我的功能的任何建议，以使其更强大。 预期输出为45.34、40.00、100.00、23.0
-
本文向大家介绍HTML5 DataList实现输入框自动下拉提示，包括了HTML5 DataList实现输入框自动下拉提示的使用技巧和注意事项，需要的朋友参考一下 在Web设计中,经常会用到如输入框的自动下拉提示,这将大大方便用户的输入。比如在Google中进行搜索的时候，就会出现下拉的智能提示列表选择框。这样的下拉列表框称为AutoComplete。在以前，如果要实现这样的功能，必须要求开发者使
-
本文向大家介绍angularJs-$http实现百度搜索时的动态下拉框示例，包括了angularJs-$http实现百度搜索时的动态下拉框示例的使用技巧和注意事项，需要的朋友参考一下 实例如下所示： 以上这篇angularJs-$http实现百度搜索时的动态下拉框示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
问题内容： 我在项目中使用模糊匹配，主要是查找拼写错误和具有相同名称的不同拼写。我需要完全了解elasticsearch的模糊匹配如何工作以及它如何使用标题中提到的2个参数。 据我了解， min_similarity 是查询的字符串与数据库中的字符串匹配的百分比。我找不到有关此值如何计算的确切描述。 据我了解， max_expansions 是应该执行搜索的Levenshtein距离。如果这实际上