直接上代码

<!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. [CC-XYHUMOQ]A humongous Query

    [CC-XYHUMOQ]A humongous Query 题目大意: 有一个长度为\(n(n\le32)\)的以\(1\)开头,\(0\)结尾的\(01\)序列\(S\).令\(f(S)\)表示序列 ...

  2. wikioi 1048 石子归并

    dp[i][j]=min(dp[i][j],dp[i][k],dp[k+1][j]+sum[i][j]); 表示i-j的最小合并代价. #include <iostream> #inclu ...

  3. Nginx负载均衡的五种策略

    nginx可以根据客户端IP进行负载均衡,在upstream里设置ip_hash,就可以针对同一个C类地址段中的客户端选择同一个后端服务器,除非那个后端服务器宕了才会换一个. nginx的upstre ...

  4. 亚马逊API的使用

    如上文所说,一个日本友人想要在亚马逊开店,托我帮他做一个小应用.他想实现的主要功能是,定时获取某个商品的最低价,如果这个价格不在他设定的范围内了,就给他发送邮件提醒. 为了帮助我完成程序,他还给我找到 ...

  5. LNMP 1.2升级Nginx、MySQL/MariaDB、PHP教程

    一般情况下不建议对生产环境进行升级,升级开始后会停止LNMP相关服务.本文仅适用于LNMP1.2及以后版本! 在LNMP目前LNMP v1.2中已经包含了Nginx.MySQL/MariaDB.PHP ...

  6. MCP2515 : SPI CAN controller management

    #ifndef __MCP2515_H #define __MCP2515_H /* mcp2515.h This file contains constants that are specific ...

  7. java对mongodb的and, in, or 经常使用操作

    DBCollection dbcon = null; DBObject query = new BasicDBObject(); BasicDBList values = new BasicDBLis ...

  8. [Mysql]MySQL 服务无法启动。

    摘要 在官网下载了mysql,版本mysql-5.7.17-winx64,免安装的压缩包,解压后.放在MySql的文件夹中.电脑系统win10 x64. 配置文件 # For advice on ho ...

  9. react-native开发总结

    项目地址:http://liu12fei08fei.github.io/blog/41react-native.html 说明 • 项目总结代码地址 • 从项目开始启动(2018-07-02)到项目进 ...

  10. arcgis python 沿线生成点

    # coding: utf-8 """ Source Name: generatepointsfromlines.py Version: ArcGIS 10.4/Pro ...