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. ADXL345加速度传感器驱动

    ADXL345 是 ADI 公司的一款 3 轴.数字输出的加速度传感器.ADXL345 是 ADI 公司推 出的基于 iMEMS 技术的 3 轴.数字输出加速度传感器.该加速度传感器的特点有:    ...

  2. 处理Block中的self问题（Capturing 'self' strongly in this block is likely to lead to a retain cycle）

    警告:ARC Retain Cycle Capturing 'self' strongly in this block is likely to lead to a retain cycle 代码: ...

  3. AppBarLayout学习笔记

    LinearLayout的子类 AppBarLayout要点: 功能:让子View(AppBar)可以选择他们自己的滚动行为. 注意:需要依赖CoordinatorLayout作为父容器,同时也要求一 ...

  4. mongodb学习(五) 查询

    1. 按条件查询: db.users.find({"name":"MM1"}) 2.find的第二个参数可以指定要返回的字段:这里1 表示要显示的字段,0 表示 ...

  5. js extend的实现

    var obj = { a: "aaaaaa" }; var obj1 = { b: "bbbbbb" }; Object.extend = function ...

  6. Leetcode 176. Second Highest Salary

    Write a SQL query to get the second highest salary from the Employee table. +----+--------+ | Id | S ...

  7. Sqlserver 时间字段批量增加

    update dt_article_attribute_value set end_time = dateadd(mi,30,start_time) create table tb(dt dateti ...

  8. ios framework 开发

    ios framework 开发 之 参考 ios framework 开发 之 实战 iOS workspace 依次编译多个工程

  9. html标签的嵌套规则分析

    1.a标签最好不要嵌套块级元素,可以嵌套内联元素,但是不能嵌套a标签和input之类的标签.能嵌套的标签像,等等. 2.ul和ol的子元素不能是别的元素只能是li,不能是别的比如div等,但是li中可 ...

  10. HTML最基础的入门(上)

    一.互联网原理 互联网原理:上网即请求数据. 过程:在本机计算机浏览器上输入网址,发送一个http请求到服务器端,服务器会根据协议作出响应,将对应的网页文件通过http协议再传输给我们本地计算机,将网 ...