这篇文章主要介绍了 JS 仿百度自动下拉框模糊匹配提示 的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
实际项目中,我们可以把数据获取改成 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 仿百度自动下拉框模糊匹配提示,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
来源: http://www.phperz.com/article/17/0329/264118.html