jquery UI autocomplete 提示下拉

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8" />
      <title>Document</title>
      <script type="text/javascript" language="javascript" src="js/trirand/jquery-1.11.1.min.js"></script>
      <script type="text/javascript" src="js/trirand/jquery-ui-1.10.4.js"></script>
      <link rel="stylesheet" type="text/css" media="screen" href="css/trirand/jquery-ui-1.10.4.css" />
      <style type="text/css">
        #text{
            width: 200px;
            margin: 50px auto;
            height: 36px;
            line-height: 36px;
        }

        .Eui_Prompt_list { max-height: 200px; overflow-y: auto; overflow-x: hidden; padding: 3px; }
        .Eui_Prompt_list li { height: 30px; line-height: 30px; }
        .Eui_Prompt_list a { display: block; padding: 0 5px; border: solid 1px transparent; }
        .Eui_Prompt_list a:hover { margin: 0; }
      </style>

  </head>
  <body>

        <input type="text" id=text/>

<script>

    $(function() {
        var projects = [
            {
                value: "j嘻嘻",
                label: "哈哈1",
                desc: "列表a"
            },
            {
                value: "j嘿嘿",
                label: "呵呵2",
                desc: "做些测试b"
            },
            {
                value: "j嗯嗯",
                label: "呃呃3",
                desc: "萌萌哒c"
            },
            {
                value: "j呼呼",
                label: "啦啦4",
                desc: "测试fd"
            }
        ];

        $(‘#text‘).autocomplete({
            delay: 0,
            minChars: 0,                //激活自动完成的输入字符数
            matchContains: true,        //只要包含输入字符就会显示提示
            autoFill: false,            //自动填充输入框
            mustMatch: true,            //与否必须与自动完成提示匹配
//            source: projects,

            source: function( request, response ) {
                // 回到 autocomplete,但是提取最后的条目

                var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
                response( $.grep( projects, function( value) {
                   return matcher.test( value.label ) || matcher.test( value.value ) || matcher.test( value.desc ) || matcher.test( value );
//                     return matcher.test( value.value );
                }));
            }
            ,
            focus: function( event, ui ) {
                return false;
            }
            ,
            select: function( event, ui ) {
                $(this).val( ui.item.value);
                return false;
            }

        }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {

            return $( "<li></li>" )
                    .append( "<a href=‘javascript:void(0);‘>"+item.value+"</a>" )
                    .appendTo( ul );
        }

        $( "#text" ).data( "ui-autocomplete" )._resizeMenu = function() {

            var w = $( "#text").parent().outerWidth()
            this.menu.element.addClass(‘Eui_Prompt_list‘).css({‘width‘:w})

        }

    });

</script>

  </body>

  </html>
时间: 2024-10-20 15:36:51

jquery UI autocomplete 提示下拉的相关文章

基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(docum

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

支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs","博客园","囧月"] 对于JSON格式的Array,则要求有:label.value属性,如下: ? 1 [{label: "博客园", value: "cnblogs"}, {label: "囧月", v

jQuery UI Autocomplete自动补全

项目上用到solr搜索引擎,在输入框输入字符的时候,想做到类似百度的效果,下拉框出现10个建议词条,为此,用上了jQuery UI Autocomplete 做自动补全 jsp页面样例: <%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/view

solr进阶八:jQuery UI Autocomplete与solr搜索结合

大致的流程: 页面捕获到文字 --> 传到servlet(Controller)层,servlet层调用后台 --> 后台根据servlet层传来的参数进行动态从solr中获取数据 --> solr 数据返回到servlet层,解析 --> 展现到页面上. 在solr里面新建一个core,在MySQL数据库里面新建一个表,从这个表导入数据到solr的core中,具体步骤可以上网查或者看我前面的教程. SQL语句: SET FOREIGN_KEY_CHECKS=0; -- -----

自制jquery可编辑的下拉框

昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致

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

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQuery UI Autocomplete - Combobox</title> 6 <link rel="stylesheet" href="http://code.jquery.com/ui/1.

JQuery -&gt; 超级简单的下拉菜单

1. create a new accout, create orginazation, create repo 2. install git in your local pc Note: you can create ssh key to avoid username/password input for github operation https://help.github.com/articles/generating-ssh-keys https://help.github.com/a

jQuery自定义漂亮的下拉框插件8种效果演示

原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html> <html lang="en" class=

jQuery cxSelect 多级联动下拉菜单

随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQuery 多级联动菜单插件.它适用于各省.动菜单. 列表数据通过 AJAX 获取(须要在server环境执行),也能够使用变量自己定义,数据内容使用 JSON 格式. 提供国内省市县数据(数据来源:basecss/cityData Date: 2014.03.31) 个人一直都有习惯,当有新知识点须要学