jquery ui 自动补全demo

怼烎@ 2022-06-02 04:13 213阅读 0赞

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Autocomplete - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                var myData = [{
      'name': 'zhangsan','height':'1.76'}, {
      'name': 'lisi','height':'1.86'}, {
      'name': 'wangwu','height':'1.96'}];
    
    
                $("#tags").autocomplete({
                    source: myData,
                    focus: function (event, ui) {
                        console.log('选中了');
                        console.dir(ui);
                        return false;
                    },
                    select: function (e, ui) {
                        $('#tags').val(ui.item.name + '====>' + ui.item.height);
                        return false;
                    }
                }).autocomplete("instance")._renderItem = function (ul, item) {
                    return $("<li>")
                        .append("<div><span>" + item.name + "</span><br>" + item.height + "</div>")
                        .appendTo(ul);
                };
            });
        </script>
    </head>
    <body>
    
    <input id="tags">
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关 Tab 自动补全

目录 1. 命名空间补全 2. 属性方法补全 3. 函数参数补全 4. 文件路径补全 IPython/Jupyter 提供不亚于集成开发环境的自

柔光的暖阳◎/ 2022年12月11日 07:55/ 0 赞/ 235 阅读

相关用jquery-ui Autocomplete一步一步实现输入自动补全

用jquery-ui Autocomplete一步一步实现输入自动补全首先看一下效果,如下图: ![Center][] ![Center 1][]

小鱼儿/ 2022年09月19日 15:28/ 0 赞/ 346 阅读

相关基于JQuery UI的联想输入自动补全

最近学习了jquery ui的autocomplete 自动补全，和大家分享一下学习的经验，希望对初学者有用。第一次写博客，使用语言 java js 使用

迷南。/ 2022年08月20日 05:28/ 0 赞/ 202 阅读

相关 IDEA / WebStorm / PhpStorm 添加jQuery自动提示，自动补全，提示文档

默认情况下没有JQuery补全，按照以下方法添加 1. 打开Settings，Languages & Frameworks > JavaScript > Libraries

小灰灰/ 2022年08月19日 11:24/ 0 赞/ 257 阅读

相关 Autocomplete 自动补全JQuery

资料：http://jqueryui.com/autocomplete/ <span style="font-size:14px;"><!doctype html>

红太狼/ 2022年07月24日 03:23/ 0 赞/ 200 阅读

相关 Eclipse自动补全

对于编程人员来说，在编写Java程序时，要记住大量的类名及方法名实在有点太痛苦了，Eclipse提供了自动代码自动补全功能，设置方式如下：Window->Preference-

矫情吗；*/ 2022年06月15日 09:21/ 0 赞/ 388 阅读

相关 jquery ui 自动补全demo

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

怼烎@/ 2022年06月02日 04:13/ 0 赞/ 214 阅读

相关 jQuery邮箱自动补全代码

[jQuery邮箱自动补全代码][jQuery] JScript 代码复制 ![None.gif][] (function($){ $

你的名字/ 2022年04月24日 04:42/ 0 赞/ 292 阅读

相关 jquery邮箱自动补全

在使用前需要有如下文件: jquery-1.7.1.min.js jquery.mailAutoComplete-3.1.js 大家可以到网上下载: 【jquer

深藏阁楼爱情的钟/ 2021年12月03日 06:29/ 0 赞/ 415 阅读

相关实现Jquery的自动补全功能

摘要： > jquery有一个自动不全的插件，现在记录一下如何实现jquery的自动补全功能。话不多说，直接开始：第一步：引入支持jquery自动补全的相关插件

左手的ㄟ右手/ 2021年06月11日 15:11/ 0 赞/ 600 阅读