直接上代码

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>autocompate</title>

    <link rel="stylesheet" href="static/themes/default/bootstrap.min.css">

    <link rel="stylesheet" href="static/themes/default/jquery.ui.css">

    <script src="static/script/jquery.js"></script>

    <script src="static/script/jquery.ui.js"></script>

</head>

<body>

支持上下箭头选择检索项目。<br>

<input id="keywords" name="keywords" type="text" class="form-control" placeholder="请输入关键字"

       style="width:350px;margin:100px 0px 0px 100px">

<script type="text/javascript">

    $(document).ready(function () {

        var cache = {};

        $("#keywords").autocomplete({

            minLength: 0,//最小长度触发搜索

            delay: 300,//延迟事件来触发

            autoFocus: true,//初始化以后自动设置焦点 默认为false

            //appendTo:"#someElem",//初始化组件搜索结果appendTo目标元素

            //source: words

            //source: "static/json_data/search.json",

            source: function (request, response) {

                var term = request.term;

                if (term in cache) {

                    response(cache[term]);

                    return;

                }

                var seachParam={};

                if($(this.element).prop("name")){

                    seachParam[$(this.element).prop("name")]=term;

                }else{

                    seachParam.search_keywords=term;

                }

                $.ajax({

                    url: "static/json_data/search.json",

                    dataType: "json",

                    data: seachParam,

                    success: function (data) {

                        cache[term] = data;

                        response(cache[term]);

                    }

                });

            },

            focus: function (event, ui) {

                return false;

            },

            select: function( event, ui ) {

                $(this).blur();

            }

        }).focus(function () {

            if ($(this).data("uiAutocomplete") && $(this).data("uiAutocomplete").menu.element)

                $(this).data("uiAutocomplete").menu.element.show();

        });

    })

</script>

</body>

</html>

案例下载

QQ 交流群 ：15129679

jquery ui autocomplete 模拟百度搜索自动提示的更多相关文章

  1. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  2. 使用Jquery UI 高仿百度搜索下拉列表功能

    最近项目有个需求,在新添加商户的时候,用户输入商户名称后,如果系统中有类似的商户名称,直接显示出来,如下图的效果: 实现这个功能,直接使用了JQuery UI 插件 目前我使用的实现版本是: 网友可以 ...

  3. jquery ui autocomplete输入中文不自动完成的问题

    因为输入法或浏览器的问题,在输入中文后并没有触发自动完成,要再按多一下键盘才触发,查看发现它是用keydown来实现.bind("keydown.autocomplete", fu ...

  4. jQuery UI Autocomplete是jQuery UI的自动完成组件（share）

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

  5. jQuery UI Autocomplete是jQuery UI的自动完成组件

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...

  6. 可输入自动匹配Select——jquery ui autocomplete

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  8. jQuery UI AutoComplete的使用

    现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...

  9. Jquery ui autocomplete简单api

    重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...

随机推荐

  1. SSH项目整合基本步骤

    SSH项目整合基本步骤 一.项目简介 该项目是由Spring4.Struts2 以及 Hibernate4 整合搭建的 web 项目,把Action分开编写,便于查看,使用JSTL.EL标签. 二.项 ...

  2. luogu4407 [JSOI2009]电子字典 字符串hash + hash表

    暴力枚举,然后\(hash\)表判断 复杂度\(O(26 * 20 * n)\) 具体而言 对于操作1:暴力枚举删除 对于操作2:暴力添加,注意添加不要重复 对于操作3:暴力替换,同样的注意不要重复 ...

  3. BZOJ.2125.最短路(仙人掌 圆方树)

    题目链接 圆方树.做题思路不写了.. 就是当LCA是方点时跳进那个环可以分类讨论一下用树剖而不必须用倍增: 如果v是u的(唯一的那个)重儿子,那么u的DFS序上+1的点即是要找的:否则v会引出一条新的 ...

  4. [java][jboss]改变jboss部署目录（虚拟目录）

    原文: [java][jboss]改变jboss部署目录(虚拟目录) 在开发过程中,有时候我们希望将程序放在我们的源代码目录中,比如d:\code下,而不是放在jboss的deploy下,怎么办? 我 ...

  5. Codeforces Round #228 (Div. 1) A. Fox and Box Accumulation 贪心

    A. Fox and Box Accumulation 题目连接: http://codeforces.com/contest/388/problem/A Description Fox Ciel h ...

  6. UVALive 4425 Another Brick in the Wall 暴力

    C - Another Brick in the Wall Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & ...

  7. Uva 5002 - The Queue DFS

    On some special occasions Nadia’s company provide very special lunch for all employees of the compan ...

  8. Alpha冲刺(1/10)——追光的人

    1.队友信息 队员学号 队员博客 221600219 小墨 https://www.cnblogs.com/hengyumo/ 221600240 真·大能猫 https://www.cnblogs. ...

  9. DeveloperAppleHelp

    UIKit: 1.UIKit User Interface Catalog   视图 View控件 2.View Programming Guide for iOS 视图编程,用代码 构建界面. 3. ...

  10. HDU 4727 The Number Off of FFF （水题）

    The Number Off of FFF Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...