直接上代码

<!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. CodeForces1082G Petya and Graph 最小割

    网络流裸题 \(s\)向点连边\((s, i, a[i])\) 给每个边建一个点 边\((u, v, w)\)抽象成\((u, E, inf)\)和\((v, E, inf)\)以及边\((E, t, ...

  2. 【二分答案】Google Code Jam Round 1A 2018

    题意:有R个机器人,去买B件商品,有C个收银员,每个收银员有能处理的商品数量上限mi,处理单件商品所需的时间si,以及最后的装袋时间pi. 每个收银员最多只能对应一个机器人,每个机器人也最多只能对应一 ...

  3. 【Floyd(并非水题orz)】BZOJ4093-[Usaco2013 Dec]Vacation Planning

    最近刷水太多标注一下防止它淹没在silver的水题中……我成为了本题,第一个T掉的人QAQ [题目大意] Bovinia设计了连接N (1 < = N < = 20,000)个农场的航班. ...

  4. 奇妙的音乐-----WriteUp

    据说flag就藏在这段音乐中,请仔细听. 格式:CTF{} 解题链接:http://ctf5.shiyanbar.com/crypto/123.zip 下载压缩包后里面有个音乐的zip文件  但是加密 ...

  5. 20162325 金立清 S2 W10 C19

    20162325 2017-2018-2 <程序设计与数据结构>第10周学习总结 认识 线性表和树两类数据结构,线性表中的元素是"一对一"的关系,树中的元素是" ...

  6. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  7. 和程序有关的一个游戏<<mu complex>> 攻略

    最速打法: 1 - login, brucedayton 2 - login, allomoto 3 - login, m3g4pa55word 4 - unlock, 03/18/34 5 - ss ...

  8. Date与String间的转换

    一.Date-->String :格式化过程 1. DateFormat :String format(Date d) 2.SimpleDateFormat是继承DateFormat(抽象类)的 ...

  9. PHP获取数组中奇偶数

    获取PHP数组中的奇偶数,可通过数组过滤函数array_filter(),看定义:该函数把输入数组中的每个键值传给回调函数.如果回调函数返回 true,则把输入数组中的当前键值返回结果数组中.数组键名 ...

  10. Android之Volley使用

    转自:http://blog.csdn.net/lfdfhl/article/details/12223345 稍微做了一点儿修改 /** * 利用NetworkImageView显示网络图片 */ ...