直接上代码

<!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. POJ 1469 COURSES 二分图最大匹配 二分图

    http://poj.org/problem?id=1469 这道题我绝壁写过但是以前没有mark过二分图最大匹配的代码mark一下. 匈牙利 O(mn) #include<cstdio> ...

  2. 中国气象局某分院官网漏洞打包（弱口令+SQL注入+padding oracle）

    漏洞一.后台弱口令 后台地址:http://www.hnmatc.org/admin/ 直接爆破得到账号admin  密码admin888 漏洞二.SQL注入(前台后台都有) 注入点:http://w ...

  3. 王彪-20162321-Java程序设计与数据结构2nd-第十周学习总结

    学习目标 讨论有向图和无向图 定义带权图并讨论它们的应用 定义图的广度优先遍历和深度优先遍历 定义最小生成树 讨论图的实现策略 书中图的基本定义 图是由结点及结点间的连接组成的,结点称为顶点,结点间的 ...

  4. 通过Nuget添加Mvvmlight框架发生错误

    IDE:Visual Studio 2013 场景:通过Nuget添加Mvvmlight框架 具体错误: 解决办法:删除Nuget,然后添加新版本的Nuget Package Manager 具体操作 ...

  5. sgu 261

    学习了元根的一些知识,哈哈. 总结一下: 几个概念: 阶:对于模数m和整数a,并且gcd(m,a)==1,那么定义a在模m下的阶r为满足ar=1 mod m的最小正整数. 性质1:r in [1,ph ...

  6. C++反汇编-菱形继承

    学无止尽,积土成山,积水成渊-<C++反汇编与逆向分析技术揭秘> 读书笔记.马上就要出差了,回来后接着写吧. 一.概述 菱形继承是最复杂的对象结构,菱形结构会将单一继承与多重继承进行组合. ...

  7. ASP.NET浏览器跨域

    转载:http://www.cnblogs.com/alvinwei1024/p/4626054.html 什么是跨域? 访问同源的资源是被浏览器允许的,但是如果访问不同源的资源,浏览器默认是不允许的 ...

  8. .Net高级技术——IDisposable

    IDisposable概述 GC(垃圾收集器)只能回收托管(Managed)内存资源,对于数据库连接.文件句柄.Socket连接等这些资源(非托管资源,UnManaged)就无能为例,必须程序员自己控 ...

  9. .NET的堆和栈02,值类型和引用类型参数传递以及内存分配

    在" .NET的堆和栈01,基本概念.值类型内存分配"中,了解了"堆"和"栈"的基本概念,以及值类型的内存分配.我们知道:当执行一个方法的时 ...

  10. win7 启动管理器修改默认启动项

    最近给我的超级本做了系统备份,以防万一,但是备份完成后,系统启动的时候总会首先进入Windows启动管理器,且默认启动项是Ghost,还需要选择一下才能进入Win7系统,如何解决这个问题呢? 方案一: ...