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. iOS中UITextField 使用全面解析

    //初始化textfield并设置位置及大小   UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 13 ...

  2. PHPCMS快速建站系列之自定义分页函数

    内容分页的实现方法:{pc:content action="lists" catid="$catid" order="id DESC" nu ...

  3. p1349星屑幻想

    这道题的原题目我也不知道是什么. 大致题意是有一个图,有些点的权值已确定,要求你确定其他点的权值使所有边两个点的权值的xor和最小,输出所有点的最终权值,输出有spj: 解法是最小割,由于题目要求的使 ...

  4. div垂直居中(js)

    window.onload = function(){ var xx = document.documentElement.clientHeight; // 470为要垂直居中的div的高度 he = ...

  5. iOS 之 线程和进程

    进程是系统调度单位,拥有自己的资源 线程是CPU调度的基本单位 进程的同步机制: 原子操作.信号量机制.自旋锁.分布式系统

  6. redhat+11g+rac 安装数据库软件时只有一个节点可选

    在安装数据库软件时,只能检测到一个节点 650) this.width=650;" title="捕获.JPG" src="http://s3.51cto.co ...

  7. Raphael的transform用法

    Raphael的transform用法 <%@ page language="java" contentType="text/html; charset=UTF-8 ...

  8. Web项目或WCF发布IIS后，如何通过VS2010调试

    在做项目的时候,例如WCF服务一般都会将WCF服务承载于控制台应用程序,或者WinForm窗体应用程序,因为这样可以直接在服务代码上打断点,然后就可以调试了.但是项目已经发布了,当然这里我用的本机进行 ...

  9. doubango(4)--SIP协议栈传输层的启动

    协议栈的默认传输结构 对于一个刚启动的协议栈来说,它需要有一个传输层,支持若干的传输结点.每一个传输结点对应于一个端口,若采用TCP连接,一个传输结点就针对于一个点到点的连接,这个连接负责sip信令的 ...

  10. Flex移动皮肤开发(三)

    范例文件 mobile-skinning-part3 在关于创建Flex移动皮肤系列文章的第二部分里,我们讨论了屏幕密度(DPI)对组件皮肤以及移动应用布局所带来的影响. 我还展示了如何使用缩放应用, ...