使用 jQueryUI.autocomplete 和 Backbone JS 的 Javascript 模块

2024-02-11

假设我想使用jQueryUi.autocomplete用于制作一个从 a 获取源代码的模块backboneCollection.

我为自动完成模块实现了以下代码(1)并且
以下为Backbone.view (2)。

实际上,我不喜欢它,因为当用户不输入任何字母时也会执行集合的获取。

我应该如何执行fetching collection or the source function仅当用户开始在输入框中输入内容时?


P.S.:
我已经发过类似的问题了使用 Backbone JS 的 jQuery 自动完成插件 https://stackoverflow.com/questions/11413430/jquery-autocomplete-plugin-using-backbone-js, 但由于 aoutocomplete 模块的需求可以在不同视图之间共享,我决定将集合的获取移到自动完成模块中。


(1)

/*global define */
define([
    'users',
    'jquery',
    'jqueryUi'
], function (UserCollection, $) {
    "use strict";
    var autoComplete = function(element) {

        var userCollection,
            data;

        userCollection = new UserCollection(); 
        userCollection.fetch();

        data =  userCollection.toJSON();

        element.autocomplete({
            minLength: 3,
            source: function(request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                response($.grep(data, function(value) {
                    return matcher.test(value.name);
                }));
            },
            create: function() {
                element.val(data.name);
            },
            focus: function(event, ui) {
                element.val(ui.item.name);
                return false;
            },
            select: function(event, ui) {
                element.val(ui.item.name);
                return false;
            }
        }).data('autocomplete')._renderItem = function(ul, item) {
            return $('<li></li>')
                .data('item.autocomplete', item)
                .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>')
                .appendTo(ul);
        };
    };

    return autoComplete;
});

(2)

// View1 (view using the module autocomplete)
define([
    'autoCompleteModule'
], function (autoCompleteModule) {
    var MyView = Backbone.View.extend({

        events: {
            'focus #names': 'getAutocomplete'
        },
        getAutocomplete: function (e) {
            autoCompleteModule($('#names'));
        }
    });
});

//伪代码来自使用 Backbone JS 的 jQuery 自动完成插件 https://stackoverflow.com/questions/11413430/jquery-autocomplete-plugin-using-backbone-js

var MyView = Backbone.View.extend({
initialize: function () {
    this.myCollection = new MyCollection();

},
events: {
    'focus #names': 'getAutocomplete',
    'keydown #names':'invokefetch'
},
invokefetch : function(){
   this.myCollection.fetch(); 
   $("#names").unbind( "keydown", invokefetch);
},    
getAutocomplete: function () {
    $("#names").autocomplete({
        source: JSON.stringify(this.myCollection)
    });
}

});

编辑-20120711--------- 这个怎么样:

//伪代码 ...

// View1 (view using the module autocomplete)
define([
    'autoCompleteModule'
], function (autoCompleteModule) {
    var MyView = Backbone.View.extend({

        events: {
            'keydown #names': 'getAutocomplete'
        },
        getAutocomplete: function (e) {
            var el = $('#names');
            if(!el.data){
                autoCompleteModule(el);
            }
        }
    });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 jQueryUI.autocomplete 和 Backbone JS 的 Javascript 模块 的相关文章

随机推荐

  • 文档中的 Firebase 云函数幂等性

    我正在关注 Firestore 的文档这里关于聚合查询 https cloud google com firestore docs solutions aggregation 我忍不住注意到云函数解决方案无法完全工作 因为它不是幂等的 nu
  • 我遇到此错误执行 org.jetbrains.kotlin.gradle.internal.KaptExecution 时发生失败

    在我的应用程序中 我有一个模型类 它有一些变量 我可以使用改造和房间数据库在该应用程序中调用并显示这些数据 这意味着该应用程序首先从服务器收集数据 然后显示在房间数据库中 但是当我在这个模型类中使用列表时 它显示了这个错误 这是我的代码 M
  • 我该如何转换这个 linq 表达式?

    假设我有一个要查询并应用排名的实体 public class Person Entity public int Id get protected set public string Name get set public DateTime
  • git lfs 迁移后 git repo 损坏

    git lfs migrate 使用不当 一切都会以某种方式生成包含每种已知文件类型的 gitattributes 文件 这基本上摧毁了我们的项目 因为每种类型的所有文件现在看起来都是这样的 version https git lfs gi
  • Git - 拉取后缺少标签

    它不是 几乎 因为 stackoverflow 不允许 精确标题的重复 Git Pull 一切都是最新的 但事实并非如此 https stackoverflow com questions 8350567 git pull everythi
  • ImportError:动态模块没有定义 init 函数,但它确实定义了

    我正在尝试为供应商 C 库编写绑定 我已经成功地使用如下代码片段在其他模块中定义 init 函数 但在这个模块中它似乎不起作用 它编译得很好 但是当我尝试将其导入到测试中时就会抛出 ImportError脚本 这里可能出了什么问题 ifnd
  • DirectX 11 叠加

    我正在为游戏编写 DirectX 11 覆盖 创建纹理非常简单 而且我对 C C 有很好的了解 我遇到的问题是在我的测试窗口中我可以打印纹理 但是一旦我改变相机角度 纹理就会随之移动 这就是大多数人想要的 我想知道的是如何以 2D 打印某些
  • 如何将球形贴图投影到球体/立方体上:“等距矩形到立方体”

    更新 我找到 http os ivrpa org panosalado wiki http os ivrpa org panosalado wiki 在java中有一个实现 谁有类似的 c 或 c 东西 我有这张全景图 来自谷歌街景的球形地
  • 用Java创建虚拟打印机

    我想使用 Java 创建一个虚拟打印机 这样当您打印文件 使用 Word 或其他东西 时 Java 打印机就会被列为有效打印机 我的目标是获取程序 Word 等 直接发送到打印机的打印机格式化对象 我不知道这是否可能 对于这个问题来说 这似
  • 合并 git 中没有真正共同祖先的复制存储库的更改

    我有一个项目 DemoA 它是基于 git 存储库 Project1 构建的 不幸的是 DemoA 一开始只是 Project1 文件的副本 然后才变成一个实际的长期项目 我现在想让 Project1 成为 DemoA 的子模块 但更重要的
  • 如何创建命名引用类型元组?

    以下行创建一个命名的ValueTuple var tuple a 1 b 2 c 3 d 4 e 5 f 6 值类型无法有效传递 做C 7提供了一种创建命名元组的方法Tuple type 如果你的意思是是否有办法将其他名称附加到System
  • FaceBook API,应用内登录

    我跟着本指南 http developers facebook com docs guides mobile ios我已经通过 Facebook 集成成功创建了我的应用程序 有什么问题 当用户必须登录时 应用程序会在浏览器中退出 或在 Fa
  • 如何打开Lucene 4.3索引?

    我是 Lucene 新手 我正在尝试使用 Luke 打开 Lucene 4 3 索引 我使用简单的 Lucene 4 3 1 应用程序创建 但它一直给我 该位置的目录无效 请检查控制台以获取更多信息 最后一个异常 java lang Ill
  • 在物理设备上测试

    我是否正确理解 我必须支付 99 美元才能在物理设备上使用我的 Windows Phone 应用程序 我制作了一个小应用程序 想在我的新手机上测试 但它不是我计划发布的应用程序 因此我不会仅仅为了看到该应用程序在物理设备上运行而支付 99
  • 如何使用 xunit.runner.console 指定自定义参数

    我有一个 C Selenium Specflow 测试套件 我正在使用 xunit console exe 使用 Jenkins 运行该测试套件 我需要将这些测试指向不同的环境 测试 QA 产品等 并且想使用命令行参数 我调用的批处理命令是
  • Visual Studio 2017 中实体框架“数据库优先”的替代品是什么

    简单的问题 我正在使用 Visual Studio 2017 虽然我知道 EF 中的 数据库优先 方法已经消失 但我想知道替代方法是什么 我特别想做的是从现有数据库生成类 我看到这个 EntityFramework 反向 POCO 生成器
  • 使用“sudo”重复上一个命令

    我经常忘记运行命令sudo 我正在寻找一种方法来创建 bash 函数 或别名 来重复最后一个命令sudo 就像是 S sudo history 1 有任何想法吗 你可以写 sudo See 9 3 历史扩展 Bash 参考手册 http w
  • 可以使用 ggplot2 在 R 中创建此图表吗?

    假设我有以下内容dataframe in R df1 lt read csv jan csv stringsAsFactors FALSE header TRUE str df1 data frame 4 obs of 5 variable
  • 如何在 .Net MVC 中将文件从磁盘流式传输到客户端浏览器

    我的操作将文件从磁盘返回到客户端浏览器 目前我有 public FileResult MediaDownload byte fileBytes System IO File ReadAllBytes Server MapPath fileP
  • 使用 jQueryUI.autocomplete 和 Backbone JS 的 Javascript 模块

    假设我想使用jQueryUi autocomplete用于制作一个从 a 获取源代码的模块backboneCollection 我为自动完成模块实现了以下代码 1 并且以下为Backbone view 2 实际上 我不喜欢它 因为当用户不输