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. 关于Java在Linux or Android平台调用.so库

    Linux平台Java调用so库-JNI使用例子 android NDK开发及调用标准linux动态库.so文件 在Android项目中调用已有.so库 Android 调用.so文件 jni And ...

  2. 关于ios 推送功能的终极解决

    刚刚做了一个使用推送功能的应用 遇到了一些问题整的很郁闷 搞了两天总算是弄明白了 特此分享给大家 本帖 主要是针对产品发布版本的一些问题 综合了网上一些资料根据自己实践写的 不过测试也可以看看 首先要 ...

  3. [转]配置 VIM 的 Go 语言开发环境

    本文是针对像我这样的 VIM 小白而写的,所使用的 VIM-GO 插件虽然步骤简单但不够详细,特写此文以做记录和分享.欢迎各位大神纠正补充! 特别说明 本博文不是 Go 语言环境搭建教程,只是 VIM ...

  4. sqlserver修改增删改字段

    ---新增列 alter table article add addtime0 datetime ---修改列 alter table article ) --删除列 alter table arti ...

  5. JAVA8 HashMap 新特性

    1. 链表解决冲突的方式:   java中处理Hash散列后的冲突使用的是链表法:     java8之前只是使用的简单Entry链表存储键值对.java8后,在Entry队列的长度大于8之后,会自动 ...

  6. 聊聊Node.js 独立日漏洞

    背景 Node.js 社区近期在美国独立日周末的狂欢之时爆出漏洞 https://medium.com/@iojs/important-security-upgrades-for-node-js-an ...

  7. github上一些酷炫效果

    转自:http://blog.csdn.net/shulianghan/article/details/18046021 主要介绍那些不错个性化的View,包括ListView.ActionBar.M ...

  8. 使用Python脚本操作MongoDB的教程

    Reference:  http://www.jb51.net/article/64225.htm

  9. UVa 10382 - Watering Grass

    题目大意:有一条长为l,宽为w的草坪,在草坪上有n个洒水器,给出洒水器的位置和洒水半径,求能浇灌全部草坪范围的洒水器的最小个数. 经典贪心问题:区间覆盖.用计算几何对洒水器的覆盖范围简单处理一下即可得 ...

  10. CSS图形形状大全

    The Shapes of CSS All of the below use only a single HTML element. Any kind of CSS goes, as long as ...