程序员经验分享-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 - 无法选择建议 的相关文章

随机推荐

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

热门标签