http://www.runoob.com/jqueryui/example-autocomplete.html

自定义数据并显示

您可以使用自定义数据格式，并通过简单地重载默认的聚焦和选择行为来显示数据。

尝试键入 "j"，或者按向下箭头按键，即可得到一个项目列表。

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI 自动完成（Autocomplete） - 自定义数据并显示</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.9.1.js"></script>

  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

  <style>

  #project-label {

    display: block;

    font-weight: bold;

    margin-bottom: 1em;

  }

  #project-icon {

    float: left;

    height: 32px;

    width: 32px;

  }

  #project-description {

    margin: ;

    padding: ;

  }

  </style>

  <script>

  $(function() {

    var projects = [

      {

        value: "jquery",

        label: "jQuery",

        desc: "the write less, do more, JavaScript library",

        icon: "jquery_32x32.png"

      },

      {

        value: "jquery-ui",

        label: "jQuery UI",

        desc: "the official user interface library for jQuery",

        icon: "jqueryui_32x32.png"

      },

      {

        value: "sizzlejs",

        label: "Sizzle JS",

        desc: "a pure-JavaScript CSS selector engine",

        icon: "sizzlejs_32x32.png"

      }

    ];

    $( "#project" ).autocomplete({

      minLength: ,

      source: projects,

      focus: function( event, ui ) {

        $( "#project" ).val( ui.item.label );

        return false;

      },

      select: function( event, ui ) {

        $( "#project" ).val( ui.item.label );

        $( "#project-id" ).val( ui.item.value );

        $( "#project-description" ).html( ui.item.desc );

        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

        return false;

      }

    })

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

      return $( "<li>" )

        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )

        .appendTo( ul );

    };

  });

  </script>

</head>

<body>

<div id="project-label">选择一个项目（请键入 "j"）：</div>

<img id="project-icon" src="data:images/transparent_1x1.png" class="ui-state-default" alt="">

<input id="project">

<input type="hidden" id="project-id">

<p id="project-description"></p>

</body>

</html>

jQuery UI 实例 - 自动完成（Autocomplete）的更多相关文章

  1. jQuery UI Autocomplete是jQuery UI的自动完成组件（share）

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

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

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...

  3. JQuery UI完成自动匹配的的下拉列表步骤

    1.先引入jquery ui相关的js,如:jquery-ui-1.10.4.js 2.写js <script type="text/javascript"> $(fu ...

  4. jQuery UI 实例 – 切换(Toggle)

    toggle()函数用于为每个匹配元素的click事件绑定轮流的处理函数. toggle()是一个特殊的事件函数,用于为匹配元素的click事件绑定多个事件处理函数.每次触发click事件时,togg ...

  5. jQuery UI 实例 - 对话框（Dialog）(zhuan)

    http://www.runoob.com/jqueryui/example-dialog.html ************************************************* ...

  6. (网页)jQuery UI 实例 - 日期选择器（Datepicker）

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面 ...

  7. 弹窗中使用jquery ui的autocomplete自动完成插件无效果 实际是被遮挡了

    在普通页面上使用jquery ui的autocomplete自动完成插件时正常显示提供选择的下拉框,但是放到弹窗中的时候就无法显示这个选择的下拉框,其它效果正常: 估计是被弹出窗遮挡了,网络搜索了jq ...

  8. jquery ui autocomplete 模拟百度搜索自动提示

    直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...

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

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Android和BLE模块连接通信

    首先,进行一下科普: 1.BLE(Bluetooth Low Energy),蓝牙4.0核心profile,主要特点是快速搜索,快速连接,超低功耗保持连接和数据传输,缺点:数据传输速率低,由于其具有低 ...

  2. C# 调用外部dll（转）

    C# 调用外部dll   一.      DLL与应用程序 动态链接库(也称为DLL,即为"Dynamic Link Library"的缩写)是Microsoft Windows最 ...

  3. yield return 和yield break

    这个还是有点意思,两个都是有返回的意思,但是区别在哪里呢? 1.return 会销毁函数的局部变量,下次调用的时候又会产生新的值 2.yield 当退出函数的时候,变量人然存在,函数下次调用的时候变量 ...

  4. sql语句：创建事物

    BEGIN TRAN Tran_Money --开始事务 DECLARE @tran_error int; ; BEGIN TRY WHERE Name = '刘备'; SET @tran_error ...

  5. 实时 Django 终于来了 —— Django Channels 入门指南

    Reference: http://www.oschina.net/translate/in_deep_with_django_channels_the_future_of_real_time_app ...

  6. 谈谈如何从Apache官网扒文档

    学习java的猴子至少要会看文档, 一.从Apache官网下载文档 进入官网--components--例如点击FileUpload--点击最下面browser download area--点击bi ...

  7. Jquery Validate 正则表达式实用验证代码常用的

    jQuery.validate 的正则验证功能,包括手机号码.电话号码.邮政编码.QQ号码.IP地址.字母和数字.中文的验证等 手机号码验证 以下为引用内容: 代码如下: jQuery.validat ...

  8. OC--类型为ID 的类的名称

    NSString *str = [[view class] description];

  9. centos 6.5下cmake工具的安装与配置

    一.cmake是什么? CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C+ ...

  10. IE6下完美兼容css3圆角和阴影属性的htc插件PIE.htc

    1.(推荐:)css插件PIE.htc,这个才是真正完美兼容css3的圆角和阴影属性在IE6环境下使用的效果,但要注意的是:下面的代码必须写在html文件的head标签内,否则无效(不能从外部引用下面 ...