直接上代码

<!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. php <a href></a>链接地址中是php变量，链接文本也是php变量的代码处理方法

    1.所用php变量名为$recent_tests,是一个二维数组,示例如下: $recent_tests[0]["test_url"] = www.baidu.com $recen ...

  2. Codeforces Round #234 (Div. 2) A. Inna and Choose Options 模拟题

    A. Inna and Choose Options time limit per test 1 second memory limit per test 256 megabytes input st ...

  3. Xcode 几个图标解释

    File.让您指定串联图的常规信息. Quick Help.提供有关对象的实用文稿. Identity.让您指定对象的自定类并定义其辅助功能属性. Attributes.让您自定对象的可视化属性. S ...

  4. Git_创建与合并分支

    在版本回退里,你已经知道,每次提交,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD严格来说不是指向提交,而 ...

  5. http://qurtyy.blog.163.com/blog/static/5744368120130221419244/

    我们先来看它的思路:把控制不透明度和控向上移动的动画分别存储在两个队列中,控制向上移动的队列按默认情况进行(在2000毫秒内完成),而不透明度的控制在1000毫秒内执行,但这个队列要晚于默认队列100 ...

  6. Android peferenceActivity 自己定义标题简单方法

    Android peferenceActivity 自己定义标题简单方法 peferenceActivity 全然使用定义好的布局. 因此不能简单象其他好窗体进行自定,如今我们须要加 一个自己定义标题 ...

  7. DM6446开发攻略：UBOOT-2009.03移植及nand flash烧写

    有关DAVINCI U-BOOT的移植,以前写过一篇u-boot-1.3.4(2008年的),其实和这个u-boot-2009.03差别不大,只不过这个u-boot-2009.03是从TI的网站上下载 ...

  8. java基础学习总结——GUI编程(一)

    一.AWT介绍

  9. Moq的一些基本用法

    本篇体验Moq的一些基本用法.首先通过NuGet安装Moq.包括: 模拟方法的返回值 模拟方法后执行回调函数 模拟方法依次返回多个值 模拟第二次调用方法返回异常 直接返回被模拟方法的原始返回值 模拟泛 ...

  10. jvm执行流程

    首先给一个简单的Java示例,源代码如下: public class Main { private static int size=1; public static void main(String  ...