程序员经验分享-hwhale

Typeahead.js - 无法选择建议

2023-12-07

我一定是个白痴。我正在使用Typeahead.js插入。我正在尝试使用自定义模板来获取建议。当我的自定义模板出现时，我无法使用箭头键实际选择项目。如果我将鼠标悬停在某个项目上，该选择也不会突出显示。我认为这可能只是一个样式问题。但是，如果出现 3 个建议，并且我单击向下箭头两次，然后输入，我选择的选项不会出现在文本框中。或者，如果我用鼠标选择一个选项，该选项不会出现在框中。

我究竟做错了什么？目前，我有以下内容：

var suggestions = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: '/api/suggests?querytext=%QUERY',
    filter: function(results) {
      return $.map(results.Results, function(suggestion) {
        return suggestion;
      });
    }
});
suggestions.initialize();

$(document).ready(function() {
  $('input.typeahead').typeahead(
    { minLength: 3 },
    {
      name: 'suggestions',
      source: suggestions.ttAdapter(),
      templates: {
        suggestion: function(data) {
          var str = '';
          if (data.Type === 'Customer') {
            str += '<i class="icon-1"></i>';
          } else if (data.Type === 'Product') {
            str += '<i class="icon-2"></i>';
          }
          str += '<div>' + data.Name + '</div>';
          return str;
        }
      }
    }
  );
});

弹出建议。结果来自以下 JSON：

{
  "Results":[
    {
      "Type":"Customer",
      "Id":5,
      "Name":"Bill",
      "LastUpdated":"01-01-2015"
    },
    {
      "Type":"Customer",
      "Id":135,
      "Name":"Billows",
      "LastUpdated":"01-02-2015",
    },
    {
      "Type":"Product",
      "Id":241,
      "Name":"Bill Check",
      "LastUpdate":"01-04-2015"
    }
  ],
  "TotalResults":3,
  "TotalCustomers":2,
  "TotalProducts":1
}

我该如何 a) 当用户将鼠标悬停在某个项目上或使用箭头键到达该项目时，对该项目应用突出显示 b) 将所选项目的Name选择建议时输入框中的值？

Thanks!


Try

$(function () {

    var suggestions = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
          url: '/api/suggests?querytext=%QUERY',
          filter: function(results) {
            return $.map(results.Results, function(suggestion) {
              return {value:suggestion.Name, suggest:suggestion};
          });
        }
    });
    suggestions.initialize();


    $("#bloodhound .typeahead").typeahead({
        minLength: 3,
        hint: true,
        highlight: true
    }, {
        name: 'suggestions',
        displayKey: 'value',
        templates: {
          suggestion: function(data) {
            var str = '';
            if (data.suggest.Type === 'Customer') {
              str += '<i class="icon-1">' + data.suggest.Type + '</i>';
            } else if (data.suggest.Type === 'Product') {
              str += '<i class="icon-2">' + data.suggest.Type + '</i>';
            }
            str += '<div>' + data.value + '</div>';
            return str;
          }
        },
        source: suggestions.ttAdapter()
    });
})

$(function () {

    var data = {
  "Results":[
    {
      "Type":"Customer",
      "Id":5,
      "Name":"Bill",
      "LastUpdated":"01-01-2015"
    },
    {
      "Type":"Customer",
      "Id":135,
      "Name":"Billows",
      "LastUpdated":"01-02-2015",
    },
    {
      "Type":"Product",
      "Id":241,
      "Name":"Bill Check",
      "LastUpdate":"01-04-2015"
    }
  ],
  "TotalResults":3,
  "TotalCustomers":2,
  "TotalProducts":1
};

    var suggestions = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: $.map(data.Results, function(d) {
            return {value:d.Name, suggest:d}
        })
    });
    suggestions.initialize();


    $("#bloodhound .typeahead").typeahead({
        minLength: 3,
        hint: true,
        highlight: true
    }, {
        name: 'suggestions',
        displayKey: 'value',
          templates: {
    suggestion: function(data) {
          var str = '';
          if (data.suggest.Type === 'Customer') {
            str += '<i class="icon-1">'+data.suggest.Type+'</i>';
          } else if (data.suggest.Type === 'Product') {
            str += '<i class="icon-2">'+data.suggest.Type+'</i>';
          }
          str += '<div>' + data.value + '</div>';
          return str;

        }
  },
        source: suggestions.ttAdapter()
    });
})
@font-face {
    font-family:"Prociono";
    src: url("../font/Prociono-Regular-webfont.ttf");
}
html {
    overflow-y: scroll;
}
.container {
    margin: 0 auto;
    max-width: 750px;
    text-align: center;
}
.tt-dropdown-menu, .gist {
    text-align: left;
}
html {
    color: #333333;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.2;
}
.title, .example-name {
    font-family: Prociono;
}
p {
    margin: 0 0 10px;
}
.title {
    font-size: 64px;
    margin: 20px 0 0;
}
.example {
    padding: 30px 0;
}
.example-name {
    font-size: 32px;
    margin: 20px 0;
}
.demo {
    margin: 50px 0;
    position: relative;
}
.typeahead, .tt-query, .tt-hint {
    border: 2px solid #CCCCCC;
    border-radius: 8px 8px 8px 8px;
    font-size: 24px;
    height: 30px;
    line-height: 30px;
    outline: medium none;
    padding: 8px 12px;
    width: 396px;
}
.typeahead {
    background-color: #FFFFFF;
}
.typeahead:focus {
    border: 2px solid #0097CF;
}
.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
    color: #999999;
}
.tt-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 422px;
}
.tt-suggestion {
    font-size: 18px;
    line-height: 24px;
    padding: 3px 20px;
}
.tt-suggestion.tt-cursor {
    background-color: #0097CF;
    color: #FFFFFF;
}
.tt-suggestion p {
    margin: 0;
}
.gist {
    font-size: 14px;
}
.example-twitter-oss .tt-suggestion {
    padding: 8px 20px;
}
.example-twitter-oss .tt-suggestion + .tt-suggestion {
    border-top: 1px solid #CCCCCC;
}
.example-twitter-oss .repo-language {
    float: right;
    font-style: italic;
}
.example-twitter-oss .repo-name {
    font-weight: bold;
}
.example-twitter-oss .repo-description {
    font-size: 14px;
}
.example-sports .league-name {
    border-bottom: 1px solid #CCCCCC;
    margin: 0 20px 5px;
    padding: 3px 0;
}
.example-arabic .tt-dropdown-menu {
    text-align: right;
}

[class|=icon] {
    color:orange;    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<div id="bloodhound">
    <input class="typeahead" type="text" placeholder="Customers and Products" />
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

typeaheadjs

Typeahead.js - 无法选择建议 的相关文章

  • Meteor：应用程序无法在 0.9.1.1 版本上运行

    出现类似错误 Error TypeError undefined is not a function evaluating Template create anonymous function iron dynamic template j

  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一

  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的

  • jQuery 可以在用户输入数字时添加逗号吗？

    当用户输入数字时 如何动态添加逗号 有没有一个好的数字格式化程序可以提供帮助 我必须稍后添加这些数字 所以我最终必须删除一行中的逗号 但屏幕需要显示逗号以提高可读性 运行代码片段以查看其工作情况 input number keyup fun

  • 如何以编程方式处理 JqGrid 事件？

    我正在使用JqG rid 的 ASP NET 包装器 http www trirand net demoaspnet aspx 我想以编程方式连接一些网格的处理程序events http www trirand com jqgridwiki

  • 音频 blob 的 URL.createObjectURL 在 Firefox 中给出 TypeError

    我正在尝试从创建的音频 blob 创建对象 URLgetUserMedia 该代码在 Chrome 中可以运行 但在 Firefox 中存在问题 错误 当我打电话时stopAudioRecorder 它停在audio player src

  • Jquery/Javascript 上传和下载文件，无需后端

    是否可以在没有后端服务器的情况下在 JavaScript 函数中下载和上传文件 我需要导出和导入由 JavaScript 函数生成的 XML 我想创建按钮 保存 xml 来保存文件 但我不知道是否可行 另一方面 我希望将 XML 文件直接上

  • MVC 在布局代码之前执行视图代码并破坏我的脚本顺序

    我正在尝试将所有 javascript 包含内容移至页面底部 我正在将 MVC 与 Razor 一起使用 我编写了一个辅助方法来注册脚本 它按注册顺序保留脚本 并排除重复的内容 Html RegisterScript scripts som

  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un

  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x

  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的

  • 如何使用 JQuery 动态排序

    如果我有一个下拉列表和一个列表框 有没有办法使用 JQuery 根据下拉列表对列表框进行排序 举个例子会很有帮助 这会改变下拉菜单中的顺序 您必须根据自己的标准设置顺序

  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive

  • 如何判断 jquery 对话框是否打开？ [复制]

    这个问题在这里已经有答案了 寻找通用案例解决方案来确定当前是否打开任何 jquery 对话框 有多个 试过 ui dialog content dialog isOpen true ui dialog dialog isOpen true

  • 如何在类似控制台的环境中运行 JavaScript？

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时

  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob

  • Jquery 验证不能正确验证数字？

    我在使用 jquery 非侵入式验证验证数字时遇到问题 我使用的版本是 ASP NET MVC 3 jQuery 1 9 1 jQuery 用户界面 1 10 1 JQuery 验证 1 11 0 我试图验证的输入是

  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交

  • 如何仅在最后一个
  • 处给出透明六边形角度？

    • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png

  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a

随机推荐

  • 优化 Titanium 应用程序的最佳方法有哪些？

    我有一个基于钛的 iOS 应用程序 它基本上遵循我自己的 MVC 结构 它有大约 30 个视图和大量网络连接来进行 API 调用 因此 该应用程序在除 iPhone4S 之外的实际设备上似乎表现缓慢 具体来说 从多任务菜单重新启动应用程序后

  • Ansible - 跳过字典中未定义的变量

    我正在使用 ipa user 模块来设置用户 有可变密码强制新密码 对于某些用户 当 var 不在字典中时 我想在迭代中跳过它 但它总是失败 这是我的剧本中的片段 Ansible版本是2 7 task name adding ipa use

  • 如何在 Silverlight 4 上创建 PDF

    我需要在 Silverlight 4 中创建并显示 PDF 文档 PDF文档将动态生成 PDF 文档将包含纯文本和一些图像 我可以使用任何 API 来实现我的要求吗 你可以使用这个 http silverlightpdf codeplex

  • 引用函数时出现“不可分类的语句”

    我正在学习函数中的虚拟参数和局部变量 我正在使用的书中的练习之一是编写一个程序 询问用户的名字和姓氏 然后将这些名字连接在一起并打印全名 这是代码 PROGRAM name test IMPLICIT NONE Declare variab

  • 如何使用 PrimeFaces websocks 通过 Glassfish 3.1 和 JSF2 进行服务器推送

    PrimeFaces pdf 说带有服务器推送功能的 websockets 仅适用于 Jetty 但 Glassfish3 1 确实有一个带 grizzly 的 websockets 组件 文档有误吗 有人用这两个通过 websockets

  • 将 JSON 文件与 Chart.js 结合使用

    我一直在寻找chart js相关问题 但似乎没有两个开发人员就如何使用显示图表给出相同的答案chart js JSON 我正在尝试使用 JSON 文件显示图表 特别是 金额 列表及其相关标签 2017 年 1 月 图表画布显示得很好 没有控

  • jquery中有文本选择器吗？

    jquery 中有文本选择器吗 My Code

  • 在 SvelteKit 中，如果未保存用户状态，是否有办法取消 popstate 事件？

    我有一个允许用户编辑其状态的组件 这会触发一个notSaved多变的 我有一个beforeunload事件处理程序来处理重新加载和退出页面以提醒用户保存状态 但是使用 SvelteKit 使用浏览器中的后退按钮似乎不会触发beforeunl

  • R：根据多个变量的值定义不同的模式[重复]

    这个问题在这里已经有答案了 这是我所拥有的 data frame x c 0 0 0 1 1 1 y c 0 0 1 0 1 1 x y 1 0 0 2 0 0 3 0 1 4 1 0 5 1 1 6 1 1 这就是我想要的 data fr

  • .net：有没有办法从下到上读取txt文件？ [复制]

    这个问题在这里已经有答案了 可能的重复 如何在C 中使用迭代器反向读取文本文件 我想知道是否有一种方法可以从下到上读取文本文件而不会造成任何性能损失 即 readLine movenext 方法 但相反 这种事情在 net 中可能吗 为了让

  • python：utcfromtimestamp 与 fromtimestamp，当时间戳基于 utcnow() 时

    很确定这是一件容易的事 但我不明白 我当地的 TZ 目前是 GMT 3 当我从datetime utcnow timestamp 这确实比我少了3个小时datetime now timestamp 在我的流程中的另一个过程中 我采用 utc

  • 在 Magento 之外但在同一域中获取购物车内容

    我需要以某种方式使 Magento 商店中当前的购物车和客户信息可供 Magento 之外的网站的其余部分访问 例如 mysite com blog 位于 mysite com store 之外 在我的域的基础上 我运行了这段代码 但它只返

  • 重命名数据帧切片上的列未按预期执行

    我试图清理数据框中的列名 但只是清理一部分列 当尝试以某种方式替换数据帧切片上的列名称时 它不起作用 为什么呢 假设我们有以下数据框 Note 底部是可复制的代码来重现数据 Value ColAfjkj ColBhuqwa ColCouiq

  • 为什么 awk 中的“1”打印当前行？

    In 这个答案 awk 2 no 3 N A 1 file 被接受了 请注意1在 AWK 脚本的末尾 答案的作者在评论中说 1 是 一种显示当前行的神秘方式 我很困惑 这是如何运作的 In awk Since 1总是评估为true 执行默认

  • 将 NSArray 转换为 JSON 对象数组

    我想从 resultsArray 创建一个 JSON 对象数组 NSMutableArray resultsArray NSMutableArray array FMResultSet resultsSet database execute

  • 请求的资源上不存在“Access-Control-Allow-Origin”标头

  • jQuery-UI 对话框内存泄漏

    我正在使用 IE7 和一些 jQuery 对话框 每个打开的对话框都会遇到大约 6meg 的泄漏 我假设这与关闭有关 但到目前为止我为删除它们所做的一切都没有帮助 此时 我认为我已经处理了除传入的回调函数之外的所有闭包 但即使在关闭并删除对

  • 在 iOS 中从 Internet URL 或本地文件播放 .mp4 或 .mov 视频？

    我怎样才能玩 mp4 or mov视频来自任一Internet URL or a local file in iOS 如何在集合视图控制器中添加多个视频 试试这个 MPMoviePlayerController NSArray paths

  • 地图 API 不适用于 HTML 中的 Windows Phone

    最近遇到这个奇怪的问题 我更像是一名网络程序员 而且我才刚刚涉足应用程序开发 我一直在尝试使用 HTML 在 Windows Phone 8 1 上开发这个地图应用程序 但遇到了一个问题 当我尝试集成 Bing 地图时 我应该将其作为脚本添

  • Typeahead.js - 无法选择建议

    我一定是个白痴 我正在使用Typeahead js插入 我正在尝试使用自定义模板来获取建议 当我的自定义模板出现时 我无法使用箭头键实际选择项目 如果我将鼠标悬停在某个项目上 该选择也不会突出显示 我认为这可能只是一个样式问题 但是 如果出

热门标签