jquery - typeahead.js 预取问题-6ren

jquery - typeahead.js 预取问题

转载作者：行者123 更新时间：2023-12-03 22:44:00

我在 Google App Engine 项目上使用 typeahead.js，但在使用预取时遇到问题。

当我使用本地时，预先输入工作正常，但如果我将相同的数据集复制到 json 文件并使用预取，则预先输入不起作用，即不显示建议。

这是我使用本地的代码版本:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <div><input type="text" name="typeahead-example" placeholder="Type here" class="typeahead-example"></div>
    <script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="./js/hogan.js" type="text/javascript"></script>
    <script src="./js/typeahead.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
                $('input.typeahead-example').typeahead({
                  name: 'example',
                  local: [{value: 'Abc Def', tokens: ['Abc', 'Def'], name: 'random1', val2: 'A', val3: 'B'},
                    {value: 'Def Ghi', tokens: ['Def', 'Ghi'], name: 'random2', val2: 'C', val3: 'D'},
                    {value: 'Ghi Jkl', tokens: ['Ghi', 'Jkl'], name: 'random3', val2: 'E', val3: 'F'},
                    {value: 'Jkl Mno', tokens: ['Jkl', 'Mno'], name: 'random4', val2: 'G', val3: 'H'}],
                  limit: 3,
                  valueKey: 'name',
                  template: '<p>{{value}}</p>',
                  engine: Hogan
                });
            });
    </script>
</body>
</html>

这是我使用预取的代码版本:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <div><input type="text" name="typeahead-example" placeholder="Type here" class="typeahead-example"></div>
    <script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="./js/hogan.js" type="text/javascript"></script>
    <script src="./js/typeahead.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
                $('input.typeahead-example').typeahead({
                  name: 'example',
                  prefetch: {url: './json/example.json', ttl: '0'},
                  limit: 3,
                  valueKey: 'name',
                  template: '<p>{{value}}</p>',
                  engine: Hogan
                });
            });
    </script>
</body>
</html>

这是 example.json 文件:

[{value: 'Abc Def', tokens: ['Abc', 'Def'], name: 'random1', val2: 'A', val3: 'B'}, {value: 'Def Ghi', tokens: ['Def', 'Ghi'], name: 'random2', val2: 'C', val3: 'D'}, {value: 'Ghi Jkl', tokens: ['Ghi', 'Jkl'], name: 'random3', val2: 'E', val3: 'F'}, {value: 'Jkl Mno', tokens: ['Jkl', 'Mno'], name: 'random4', val2: 'G', val3: 'H'}]

此问题出现在 Chrome 和 Firefox 中。在 Chrome 中调试，我可以看到 example.json 文件已被提供并接收。 example.json 网络事件的预览和响应显示了文件的完整内容。但是，在 chrome 调试器的资源部分，本地存储为空。没有控制台错误，只有这条消息

XHR finished loading: "http://localhost:8000/json/example.json". jquery-1.10.2.js:8706
send jquery-1.10.2.js:8706
jQuery.extend.ajax jquery-1.10.2.js:8136
jQuery.(anonymous function) jquery-1.10.2.js:8282
jQuery.extend.getJSON jquery-1.10.2.js:8265
c.mixin._loadPrefetchData typeahead.min.js:7
proxy jquery-1.10.2.js:827
c.mixin.initialize typeahead.min.js:7
proxy jquery-1.10.2.js:827
(anonymous function) typeahead.min.js:7
jQuery.extend.map jquery-1.10.2.js:782
g typeahead.min.js:7
jQuery.extend.each jquery-1.10.2.js:657
jQuery.fn.jQuery.each jquery-1.10.2.js:266
b.initialize typeahead.min.js:7
jQuery.fn.typeahead typeahead.min.js:7
(anonymous function) prefetch.html:14
fire jquery-1.10.2.js:3048
self.fireWith jquery-1.10.2.js:3160
jQuery.extend.ready jquery-1.10.2.js:433
completed

关于this post ，我没有跨域问题，并且关于 this post ，我已将 ttl 设置为 0，问题仍然存在。

如有任何帮助，我们将不胜感激。

更新*为了响应 @NitzanShaked 的建议，我添加了一些控制台日志记录。

首先我尝试了这个，但控制台中没有注册任何内容。

$(document).ready(function(){
    $('input.typeahead-example').typeahead({
      name: 'example',
      prefetch: {
        url: './json/example.json', 
        ttl: '0',
        filter: function (data) {
            console.log(data);
            for (var i = 0; i < data.length; i++) {
                datum = data[i];
                console.log(datum);
            }
            return data;
        }
      },
      limit: 3,
      valueKey: 'name',
      template: '<p>{{value}}</p>',
      engine: Hogan,
    });
});

然后我尝试了这个:

$(document).ready(function(){
    $('input.typeahead-example').typeahead({
      name: 'example',
      prefetch: {url: './json/example.json', ttl: '0'},
      limit: 3,
      valueKey: 'name',
      template: '<p>{{value}}</p>',
      engine: Hogan,
    }).bind('typeahead:opened', function (obj, datum) {
                console.log(obj);
                console.log(datum);
                console.log(datum.val2);
                });
});

当我在输入字段内单击时，这导致控制台记录以下内容

jQuery.Event {type: "typeahead:opened", timeStamp: 1378502920480, jQuery1102039872112357988954: true, isTrigger: 3, namespace: ""…}
currentTarget: input.typeahead-example tt-query
data: null
delegateTarget: input.typeahead-example tt-query
handleObj: Object
isTrigger: 3
jQuery1102039872112357988954: true
namespace: ""
namespace_re: null
result: undefined
target: input.typeahead-example tt-query
timeStamp: 1378502920480
type: "typeahead:opened"
__proto__: Object
 prefetch.html:22
undefined prefetch.html:23
Uncaught TypeError: Cannot read property 'val2' of undefined prefetch.html:24
(anonymous function) prefetch.html:24
jQuery.event.dispatch jquery-1.10.2.js:5095
elemData.handle jquery-1.10.2.js:4766
jQuery.event.trigger jquery-1.10.2.js:5007
(anonymous function) jquery-1.10.2.js:5691
jQuery.extend.each jquery-1.10.2.js:657
jQuery.fn.jQuery.each jquery-1.10.2.js:266
jQuery.fn.extend.trigger jquery-1.10.2.js:5690
c.mixin.trigger typeahead.min.js:7
c.mixin._propagateEvent typeahead.min.js:7
proxy jquery-1.10.2.js:827
d.trigger typeahead.min.js:7
proxy jquery-1.10.2.js:827
c.mixin.open typeahead.min.js:7
proxy jquery-1.10.2.js:827
c.mixin._openDropdown typeahead.min.js:7
proxy jquery-1.10.2.js:827
d.trigger typeahead.min.js:7
proxy jquery-1.10.2.js:827
c.mixin._handleFocus typeahead.min.js:7
proxy jquery-1.10.2.js:827
jQuery.event.dispatch jquery-1.10.2.js:5095
elemData.handle

最佳答案

您的问题出在 example.json 中，事实证明...您需要使用双引号引用键名，以及所有字符串(例如在 tokens 中)也需要用双引号引起来。

例如，这对我有用:

[{"value": "Abc Def", "tokens": ["Abc", "Def"], "name": "random1", "val2": "A", "val3": "B"}]

将 url 从 ./json/example.json 更改为 /json/example.json(删除前导点)。

关于jquery - typeahead.js 预取问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18662041/

文章推荐： jquery - 选项 :selected not working jquery 1. 9

文章推荐： javascript - 如何在 localStorage 中存储对象？

文章推荐： jQuery 选择菜单下拉高度

r - (预)向函数工厂和内部提供变量
我正在阅读哈德利的 Advanced R并尝试一些东西。我正在尝试创建一个 lazy闭包函数返回一个带有提供的函数 data.frame在其环境中以及使用 with并且能够在以后提供额外的函数参数。
ios - Swift:(预)从initialViewController加载UIWebView
我有两个 ViewController。初始 ViewController 是输入和存储 URL 的地方。此初始 ViewController 的 viewDidLoad 还应该在应用程序启动时开始加
android - state_activated 预 hive
你是怎么用的对于应用程序中的 ListView 项也应该在设备 <11 上运行？由于 activated_state 在 HC 之前不可用，我只能想到两个肮脏的解决方法: 在您的 Activit
android - ActionBar 预 hive
我正在为 android (2.1 > 3.1) 编写一个应用程序，我想使用熟悉的做法，即在 Honeycomb 应用程序中使用应用程序图标来进入家庭 Activity ，但是，当我之前运行该 Act
Redis 预 GET 事件
如果搜索的键不存在，我如何覆盖方法 GET 或编写一个将在服务器端执行的新函数返回另一个键值？示例: 如果关键字“word_1 word_2 word_3 word_4”不存在则搜索关键字“word
Git 预 merge Hook ？
对于我的存储库，我使用的是 Git 和 Stash。在 Stash 端，我限制了(只读)对 master 的访问权限，因此任何用户都可以从 master 分支分支以获取功能/分支，但不能直接 merg
select - Dojo dgrid :(预)在渲染中选择行
如何配置dgrid及其存储以定义渲染行时是否已经选择了行？例如，如果我的行数据是这样的： { id: 1, name: 'Item Name', selected: true } 我当前
JMeter - 使用来自其他 BeanShell 预/后处理器的变量？
有没有一种方法可以将变量从一个 BeanShell 前/后处理器引用到另一个 BeanShell 处理器(它们在同一个线程组中)？如果我在 HTTP 请求下的 BeanShell 预处理器中创建了一
ios - Xcode 预 ActionScript 不起作用？
问题我已尝试添加预操作 shell 脚本，这些脚本会根据我正在构建的内容打开/关闭我的 .pch 文件中的某些定义。但是，在运行构建时，没有任何反应。我不是一个流利的 shell 脚本编写者，所以
javascript - 避免 jQuery(预)加载图像
我有一个 HTML 字符串用作 jQuery 输入文档。 // the variable html contains the HTML code jQuery( html ).find( 'p' ).
c - Mercurial 预 merge 钩子(Hook)
在 Mercurial 中允许 merge 之前有没有办法进行一些检查？通过将以下内容添加到 ~/.hg/hgrc，我找到了更新前 Hook ，并拥有一个在允许更新之前运行的脚本: [hooks]
php - CodeIgniter(预 Controller ) Hook 和缓存
总结: 预 Controller Hook 是否在缓存期间执行？是否有任何 Hook 点可以执行？ (系统前？) 我应该强调一个事实，即 Hook 不会影响发送到浏览器的内容。这不是问题。详细版:
android - Skobbler Android 预 bundle 错误
我正在使用适用于 android 的 Skobbler Map API，到目前为止它一直非常好。按照官方的“操作方法”，我已经能够将 map 应用到我的应用程序中。比我可以让应用程序下载 map 并离
javascript - Node 预 gyp 安装 --fallback-to-build
当我安装bcrypt时我的 hapi js 项目的模块尚未安装，它显示类似 node-pre-gyp install --fallback-to-build 我尝试通过运行来安装； npm i nod
java - 编写任务执行(预/后)脚本 [Gradle + IntelliJ]
我试图使用此代码的变体: apply plugin: 'java' apply plugin: 'idea' idea.workspace.iws.withXml { provider ->
php - 如何防止 PHP namespace 冲突(预 bundle )
假设我们有一个 PHP 项目，其依赖项 A 和 B 分别依赖于 PHP 库 X，但版本不同。通常，人们会使用诸如 composer 之类的 PHP 依赖管理器，它可以通过在与 A 和 B 兼容的版本
formatting - 如何在代码/预 block 中添加 Markdown 格式？
这似乎违背了代码块的目的，但我希望能够在代码块中加粗。例如，如果我想将返回行加粗: int main(void) { **return 0;** } 最佳答案您必须在 HTML 中执行此操作
deep-learning - 我们是否应该使用 Huggingface(预)训练一个 BERT 无框模型的小写输入数据？
我们是否应该使用 Huggingface(预)训练一个 BERT 无框模型的小写输入数据？我查看了 Thomas Wolf ( https://github.com/huggingface/trans
javascript - Mongoose 预 Hook : pull _id from array on remove
我有两个模式: 技能: var mongoose = require("mongoose"); var SkillSchema = new mongoose.Schema({ skill: {
html - Angular2 的 IE 11 预 Bootstrap 加载屏幕
我这里有问题。这适用于 Chrome，但我无法在 IE11 的 index.html 中使用任何动画。当它不想工作时，我会看到一个静态屏幕。同样在 IE 中，消息不会像它应该的那样消失。如果我将 di

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - typeahead.js 预取问题