Typahead Bloodhound提示和自动完成不使用远程URL(Typahead Bloodhound hint and autocomplete not working with remote url)
我不知道为什么它不使用远程网址。 当本地加载相同的结果/ json数组时,它工作正常。
我的代码
var bh_engine = new Bloodhound({ datumTokenizer: function(d) { var my_string = d.company_name; my_string = my_string.replace(/\s/g, ""); var string_length = my_string.length; var my_matches = []; for (var i = 0; i < string_length; i++) { my_matches.push(my_string.substring(i, string_length)); } return my_matches; }, queryTokenizer: Bloodhound.tokenizers.whitespace, local: local_source, prefetch: prefetch_source, remote: remote_source }); bh_engine.initialize(); $(apply_on_element + ' .bootstrap-tags-input input#mytaginput').typeahead({ hint: true, highlight: true, minLength: 1 }, { async:true, displayKey: 'company_name', source: bh_engine.ttAdapter() });
Json数据
[{"company_name":"Google","code":1},{"company_name":"Facebook","code":2}]
在本地和远程测试相同的数据。 只有远程访问才能解决问题。
任何想法? 为什么?
你也可以在这里查看JSfiddle
首先输入“string1”或“string2”等字符串......
然后使用远程数据输入“data30”等等.....
它每次都显示json对象的第一个元素
正如你可以看到粗体/突出显示功能正常工作,但不提示
当我输入“data50”或至少在列表的第一个位置时,我想只显示“data50”
I don't know why its not working with remote url. Its working fine when same results/json array loaded locally.
My code
var bh_engine = new Bloodhound({ datumTokenizer: function(d) { var my_string = d.company_name; my_string = my_string.replace(/\s/g, ""); var string_length = my_string.length; var my_matches = []; for (var i = 0; i < string_length; i++) { my_matches.push(my_string.substring(i, string_length)); } return my_matches; }, queryTokenizer: Bloodhound.tokenizers.whitespace, local: local_source, prefetch: prefetch_source, remote: remote_source }); bh_engine.initialize(); $(apply_on_element + ' .bootstrap-tags-input input#mytaginput').typeahead({ hint: true, highlight: true, minLength: 1 }, { async:true, displayKey: 'company_name', source: bh_engine.ttAdapter() });
Json data
[{"company_name":"Google","code":1},{"company_name":"Facebook","code":2}]
Tested with same data locally and remote. Its giving problems only with remote access.
Any idea? why?
You can also check here JSfiddle
First type "string1" or "string2" and so on string...
and then with remote data Type "data30" and so on.....
It shows first element of json object every time
As you can see bold/highlight feature working fine, but hint not
I want to show only "data50" when i enter "data50" or at least on first place in the list
原文:https://stackoverflow.com/questions/46440971
最满意答案
我将使用链接功能
myMoudule.directive('tabWrapper', function($compile) { return { restrict:'AE', replace: true, link: function(scope, element, attrs) { var html = '<tab heading="' + attrs.heading + '"></tab>'; var e = $compile(html)(scope); element.replaceWith(e); } }; });
I will use link function instead
myMoudule.directive('tabWrapper', function($compile) { return { restrict:'AE', replace: true, link: function(scope, element, attrs) { var html = '<tab heading="' + attrs.heading + '"></tab>'; var e = $compile(html)(scope); element.replaceWith(e); } }; });
相关问答
更多-
用于angular-ui bootstrap手风琴指令的复选框(Checkbox in header for angular-ui bootstrap accordion directive)[2022-07-01]
{{group.title}} { ... -
设置select2输入的宽度(通过Angular-ui指令)(set the width of select2 input (through Angular-ui directive))[2023-11-17]
您需要指定要解析的属性宽度才能保留元素宽度 $(document).ready(function() { $("#myselect").select2({ width: 'resolve' }); }); You need to specify the attribute width to resolve in order to preserve element width $(document).ready(function() { $("#myselect") ... -
Angular-ui模态指令(Angular-ui modal directive)[2022-06-14]
在你的模态形式中只需使用: in your modal form simply use: -
如何将选项更改传递给Angular-UI ui-select2?(How can I pass option changes to Angular-UI ui-select2?)[2022-03-11]
ui-select2指令不为这个开箱即用的API提供API,因此您必须通过在select2属性上添加$ watcher(在指令链接函数内)来自定义指令以满足您的需求: scope.$watch(attrs.uiSelect2, function(opts) { elm.select2(opts); }, true); ui-select2 directive does not provide an API to this out-of-the-box, so you'd have to customi ... -
检查2件事: 第一个是确保注入ui.bootstrap依赖项 angular.module('myModule', ['ui.bootstrap']); 第二个是确保你添加了所有引导样式表作为bootstrap ui使用它们 希望这可以帮助。 Check 2 things: The first is to make sure the ui.bootstrap dependency is injected angular.module('myModule', ['ui.bootstrap']); The ...
-
我将使用链接功能 myMoudule.directive('tabWrapper', function($compile) { return { restrict:'AE', replace: true, link: function(scope, element, attrs) { var html = '
'; var ... -
翻译Angular-UI分页(Translate Angular-UI pagination)[2022-05-26]
而不是过度整个常量对象,你可以在run方法中修改它的属性 var app=angular.module('myapp', ['ui.bootstrap']); app.run(function(paginationConfig){ paginationConfig.firstText='MY FIRST'; paginationConfig.previousText='YOUR TEXT'; }) DEMO 在新版本的ui.bootstrap你应该使用 uibPaginationConfi ... -
我在这里放置的解决方案,希望它能帮助其他人,也是在is-open属性中引用父作用域: ng-model="$parent.dt" is-open="opened" /> 成为 ng-model="$parent.dt" is-open="$parent.opened" /> The solution, which I'm putting here in the hope it'll help someone else, was to also refer to the parent scope in ...
-
angular-ui bootstrap typeahead with promise和orderBy(angular-ui bootstrap typeahead with promise and orderBy)[2023-05-09]
你编写它的方式是使一个过滤器作用于承诺本身,而不是承诺的结果。 在这种情况下,正确的方法是在JavaScript中进行实际过滤,如下所示: $scope.getStates = function(val) { return $timeout(function(){ return orderByFilter(filterFilter($scope.statesWithFlags, val), 'name', true); }, 500) }; 作为旁注: $timeout服务 ... -
angular-ui / ui-calendar事件不在safari中呈现(angular-ui/ui-calendar events not rendering in safari)[2021-12-12]
问题是你如何尝试转换日期。 在镀铬之后的额外位。 是一个有效的日期,但在safari中它会导致开始日期和结束日期为无效日期。 我所做的就是更改toDate函数以返回这个new Date(this.split('.')[0])并且它可以工作。 http://plnkr.co/edit/A7Nss1T2bSlZHXd2bg5M?p=preview The problem is how you are trying to convert the dates. In chrome the extra bit aft ...