Tag: typeahead.js

Bootstrap标签预先输入不使用jQuery ajax填充菜单: 我使用bootstrap标签（ https://github.com/bootstrap-tagsinput/bootstrap-tagsinput ）来填充一些标签。我正在使用jQuery 3和Bootstrap 3.下面是代码片段。它从服务器获取数据但不处理。你能告诉我怎么解决这个问题吗？我已经包含了https://github.com/twitter/typeahead.js和https://github.com/bootstrap-tagsinput/bootstrap-tagsinput和相应的CSS function attachOrgRoleTypeAhead(){ console.log(‘attachOrgRoleTypeAhead called’); $(‘.roletag’).tagsinput({ tagClass:’form-control input-sm’, //itemValue: ‘rolename’, //itemText: ‘rolename’, //display: ‘rolename’, allowDuplicates: false, freeInput: false, typeaheadjs: { displayKey: ‘text’, afterSelect: function(val) { this.$element.val(“”); }, source: function (query, process,asynchProcess){ var typeaheadData = {}; var rolesdata = {}; var $items = new Array; rolesdata.orgid= $(‘#orgidselector’).find(“option:selected”).val(); rolesdata.query=query; […]

关于选择条目的jquery-typeahead隐藏意见箱: 我正在玩第一个演示示例“国家v1”的jquery-typeahead作品来自： http ：//www.runningcoder.org/jquerytypeahead/demo/ $.typeahead({ input: ‘.js-typeahead-country_v1’, minLength: 1, order: “desc”, dynamic:true, source: { data: data }, callback: { onInit: function(node) { console.log(‘Typeahead Initiated on ‘ + node.selector); } } }); https://jsfiddle.net/qz7dfsku/ 当我选择其中一个选项时，我试图让建议框消失。它似乎添加动态：true打破它，如果我将其设置为false然后它工作。知道这可能会发生什么吗？

使用typeahead.js创建可点击的动态链接: 我想在我的搜索自动完成链接到网站上的特定餐厅的建议结果。注意：我遇到过这篇文章，但它使用了一个静态的对象数组。与这篇文章不同，我希望从服务器端生成链接。 var links = [{name: “abc”, link: “http://www.example1.com”}, {name: “nbc”, link: “http://www.example2.com”}]; var source = new Bloodhound({ … local: links }); 在我的情况下，我从Rails查询数据库，因此name将是餐厅的名称， link将是restaurant_path 。基于我目前的代码，我如何才能实现这一目标？如果需要任何其他代码，请与我们联系。 $(function() { var restaurants = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace(‘name’), queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: “/search/autocomplete?query=%QUERY”, wildcard: “%QUERY” } }); restaurants.initialize(); $(‘#autocomplete’).typeahead(null, { displayKey: ‘name’, source: restaurants.ttAdapter() }); […]

Typeahead填充活动记录对象的所有属性: 我正在使用rails 4，我正试图让它与最新的typeahead一起工作。下拉列表显示匹配的活动记录对象的所有属性，而不仅仅是我想要的名称。 item.rb def self.search(search) if search where([‘lower(name) LIKE ?’, “%#{search}%”]) else Item.all end end items_controller.rb def index @items= Item.search(params[:query]) end def typeahead render json: Item.where(‘name ilike ?’, “%#{params[:query]}%”) end _header.html.erb . . . $(document).ready(function(){ var bloodhound = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace(‘name’), queryTokenizer: Bloodhound.tokenizers.whitespace, limit: 10, remote: {url: ‘/typeahead/%QUERY’, wildcard: ‘%QUERY’} }); bloodhound.initialize(); $(‘#typeahead’).typeahead(null, […]

用血猎犬远程建议预先输入: 这是我的代码： tagsProcessor(){ const suggestions = [{value: ‘string1’}, {value: ‘string2’}, {value: ‘string3’}, {value: ‘string4’}, {value: ‘string5’}] var bloodhoundSuggestions = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace(‘value’), queryTokenizer: Bloodhound.tokenizers.whitespace, sufficient: 3, local: suggestions, remote: { url: ‘http://localhost:3001/api/suggestions’, } }); const $tagsInput = $(‘#tagsInput’) $tagsInput.typeahead({ hint: true, highlight: true, minLength: 1 }, { name: ‘suggestions’, displayKey: ‘value’, source: bloodhoundSuggestions }); } […]

如何在先行猎犬远程返回零结果时捕获事件: 我正在使用twitter typeahead和Bloodhound建议引擎，一切正常。下面是我的代码片段 // instantiate the bloodhound suggestion engine var searchData = new Bloodhound({ datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); }, queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: ”, filter: function (data) { return $.map(data.results, function (record) { return { title: record.title, pageURL: record.pageURL }; }); } } }); // initialize the bloodhound suggestion engine searchData.initialize(); searchData.clearRemoteCache(); // […]

typeahead.js prefetch不起作用: 我无法在typeahead.js中获取prefetch函数，但它可以很好地处理本地数据。我首先尝试链接到返回json对象或列表的servlet，但过了一段时间我放弃了它并开始检查提供的示例。因此，他们的示例链接到如下所示的页面： http ： //twitter.github.io/typeahead.js/data/countries.json但是，即使我将脚本链接到该页面，我的脚本也无法正常工作与他们完全一样的事情。我尝试将该文件复制到我的本地工作区并链接到那里无济于事。为了检查它是否正在进行任何调用我每次收到get请求时都会使servlet崩溃，当我运行自动完成示例页面时它确实崩溃了，因此它不是缓存问题。我尝试将jquery降级到1.9.1，但这也不起作用（目前使用1.10）。我尝试使用不同版本的typeahead.js。我尝试使用Internet Explorer和谷歌浏览器来查看错误是否存在。必须有一些我缺少的重要内容，因为我已经用尽了我能想到的每一个错误来源。其他人似乎没有任何问题让这个工作。这是我使用的代码： Demo $(document).ready(function() {$(‘.typeahead’).typeahead({ name: “Auto” , ttl_ms: 10000, prefetch: ‘http://twitter.github.io/typeahead.js/data/countries.json’, //local: [‘abc’, ‘acd’, ‘ade’, ‘bcd] });});

Twitter-Typeahead不提供建议: 我正在尝试使用twitter-typeahead-rails 。我的意图是当我输入“#Typeahead”输入框时，通过下拉框建议模型“User”的实例。但是，当我输入时没有任何反应。有没有人看到我的代码可能有任何问题？的Gemfile： gem ‘twitter-typeahead-rails’ 布局/ application.js中： //= require twitter/typeahead //= require twitter/typeahead/bloodhound 配置/ routes.rb文件： get ‘typeahead/:query’ => ‘users#typeahead’ 控制器/ users_controller.rb： def typeahead render json: User.where(name: params[:query]) end 意见/用户/ show.html.erb： var bloodhound = new Bloodhound({ datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.value); }, queryTokenizer: Bloodhound.tokenizers.whitespace, remote: ‘/typeahead/%QUERY’, limit: 50 }); bloodhound.initialize(); $(‘#typeahead’).typeahead(null, { […]

将Typeahead与Google自定义搜索引擎结合使用: 我正试图让Twitter Typeahead + Bloodhound与Google的CSE合作。到目前为止，我已经设法返回结果，但我无法计算出datumTokenizer。 var results = new Bloodhound({ datumTokenizer: function(data) { return Bloodhound.tokenizers.whitespace(d.value) }, queryTokenizer: Bloodhound.tokenizers.obj.whitespace, remote: { url: “http://clients1.google.com/complete/search?client=partner&hl=en&sugexp=gsnos%2Cn%3D13&gs_rn=25&gs_ri=partner&partnerid=004914516364918182382%3Ayfqw09r4qvu&types=t&ds=cse&cp=3&gs_id=15&q=%QUERY&callback=showResults&duffCallback=?”, ajax: $.ajax({type:’GET’,dataType:’jsonp’,jsonp:’duffCallback’}), filter: showResults } }); 看小提琴： http ： //jsfiddle.net/thugsb/3KAjh/ 你会看到我从showResults（）返回的结果是一个数组。但是，从filter:调用showResults（）似乎没有做任何事情，因为删除该行没有任何效果。所以我不太确定发生了什么。请注意，duffCallback是我在阅读这个问题时要做的。如果有更好的方法来完成这项工作我就全都耳朵！

如何将Typeahead.js建议绑定到跨域数据源？: 标题说明了一切。我尝试在url上使用远程源（在另一个域上）并返回以下消息： XMLHttpRequest cannot load http://www…./argument?callback=urlHandler. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:5000′ is therefore not allowed access. 相关守则 var films = new Bloodhound({ datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); }, queryTokenizer: Bloodhound.tokenizers.whitespace, remote: {url: “http://www…./%QUERY?callback=urlHandler”, ajax: $.ajax({type:’GET’,dataType:’jsonp’,jsonp:’jsonp’}) } }); 更新：似乎问题出在CORS问题上。并且不尊重$.ajax设置对象的dataType设置为jsonp 。以下评论有更多信息。编辑：我找到了修复！现在的问题就是解释为什么会这样。所以，当我将url更改为http://www….?callback=? 这实际上使它加载了GET调用的响应作为JSONP对象。 AJAX dataType和jsonp属性不应该涵盖这个吗？