justgoscha / allmighty-autocomplete Goto Github PK
View Code? Open in Web Editor NEWSimple to use autocomplete directive in a module for AngularJs!
License: MIT License
Simple to use autocomplete directive in a module for AngularJs!
License: MIT License
Add test cases.
Start looking here:
https://egghead.io/lessons/angularjs-testing-overview
Move on to this, maybe:
https://egghead.io/search?q=testing
Hello there! I've had success with the module using a small dataset. But when I've got 10000+ items it gets too slow to render the input changes (+20 seconds on a modern hardware).
Suggestions amount should be limited so that there's less painting for the browser once the input field value is changed.
As a quickfix you modify row 223:
'<li suggestion ng-repeat="suggestion in suggestions | filter:searchFilter | orderBy:\'toString()\' | limitTo: 10" '+
I feel that limitTo
should be added as a parameter to the autocomplete-directive.
Cheers,
Sampo
Trying to make a simple example using the autocomplete directive and I receive this message.
I need pass an array of objects, and be able to choose the property as the search field.
var data = [
{
name: 'Json',
id: 1
},
{
name: 'Peter',
id: 2
}
]
data = data, searchField=name
Hi,
I have multiple autocomplete fields in a view, so I would like to send an extra parameter for the on-type function so I can know which autocomplete has changed. Something like this:
<autocomplete
ng-model="selectedCountry"
data="contries"
on-type="typed('country')">
</autocomplete>
Is this possible? Is there another way to know which autocomplete has changed?
Thanks!
It would be great if you could limit the number of returned results as well.
It's causing a duplicated script tag using grunt. Can you fix it?
And about the CSS. Can add it automatically?
Edit: About the data itself: do you guys plan to have a "parse" function for data? For instance: I have an array of objects containing the id and name of a person and I'd like to use the autocomplete to search it. But when I select the name, I'd like to have access to the person's id.
Hi can you create a version tag for the project. I am trying to use the library via rails-assets.org which is a proxy for Bower and it needs versions :)
Thanks!! Ref: tenex/rails-assets#105
This is probably a dumb question and maybe I'm blind but the directive doesn't seem to be updating ng-model. How do I get the final selected out of the autocomplete?
I would like to get rid of the jQuery dependency, so the library is more lightweight and easier to setup.
Latest version with highlights (not on the demo link), typing [
in the input leads to this error:
SyntaxError: Invalid regular expression: /([|[)/: Unterminated character class
Should not be open, only on typing.
Hello,
i'd like to ask if there will be possibility to disable filtering of autocomplete suggestions. I mean when I type for exampple "physics" but I populate the suggestions "data" with terms not containing exact string "physics", these are not visible despite the fact the "data" are populated with them.
Thanks,
Daniel
Autocomplete never closes when input lose focus in IE8.
Greetings,
I am trying to display the results of the autocomplete, meaning the list of suggestion. I inspect element and find that they are always behind something. I tried adjusting the z index to maximum but no luck. Please let me know what I can do.
If you use classes as controllers, which is usual for people using TypeScript, when handling events fired by autocomplete such as "on-select" or "on-type" the keyword "this" no longer refers to the handling controller. ie:
var TestApp;
(function (TestApp) {
var Controllers;
(function (Controllers) {
var TestController = (function () {
function TestController($scope) {
var _this = this;
this.testVar = false;
this.items = ['a', 'b'];
this.item = '';
}
TestController.prototype.select = function () {
this.testVar = true; //this does not set testVar on the controller
};
TestController.prototype.type = function (var typed) {
this.testVar = true; //this does not set testVar on the controller
};
TestController.$inject = ['$scope'];
return TestController;
})();
Controllers.TestController = TestController;
angular.module("TestApp.controllers").controller("TestApp.Controllers.TestController", TestController);
})(Controllers = TestApp.Controllers || (TestApp.Controllers = {}));
})(TestApp || (TestApp = {}));
Is there or will there be a way to chain suggestions? Let's say that my data is ['Mango', 'Pineapple', 'Banana']
, and I would write M
to get Mango
as a suggestion, and if I select that, enter a space, and then start typing B
I would get Banana
as a new suggestion. Selecting Banana
would not remove Mango
from the search, but would leave Mango Banana
in the search bar.
I thought I would be able to do this by changing $scope.searchParam, but I can't seem to reach that variable for some reason.
When I'm using the autocomplete, either in my code and in the demo, appears a lot of this errors
Error: [$sce:unsafe] http://errors.angularjs.org/1.2.15/$sce/unsafe
any thought?
i want use ng-pattern, help me !
It would be nice if we could have auto-select option.
If it is set to true, the first result would always be selected while typing.
how do i register the autocomplete.js properly.. i'm getting error:
Uncaught ReferenceError: angular is not defined app/bower_components/allmighty-autocomplete/script/autocomplete.js:3
I'm using the angular + requirejs seed (https://github.com/tnajdek/angular-requirejs-seed) and my registration as follow:
require( [
'angular',
'app',
'autocomplete',
'routes'
], function(angular, app, autocomplete, routes) {
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function() {
angular.resumeBootstrap([app['name']]);
});
});
there is no way to specify a custom order because the suggestions list is automatically sorted.
would be nice to have a possibility to specify this behaviour.
Should require minimal code changes.
Hi,
Your module really save my time, I wonder if there is any option why which I can add image and some description in suggestions .
Like This : http://imgur.com/k8AFI9A
Thanks
$ bower install allmighty-autocomplete
bower allmighty-autocomplete#* cached git://github.com/JustGoscha/allmighty-autocomplete.git#54c2c6f193
bower allmighty-autocomplete#* validate 54c2c6f against git://github.com/JustGoscha/allmighty-autocomplete.git#*
$ cat bower_components/allmighty-autocomplete/script/ac_template.html
cat: bower_components/allmighty-autocomplete/script/ac_template.html: No such file or directory
Hi thanks for your code,
I use your code like that :
<autocomplete ng-model="query" data="suggestions" on-type="tapedQuery" attr-placeholder=""></autocomplete>
In "Sugestions", I have the folling values :
["Le Chevalier noir", "Leeroy Jenkins", "Légendaire", "Léviathan des flammes"]
But the directive is not showing "Légendaire" and "Léviathan des flammes". Do you have an idea ?
Thanks in advance.
Hi,
I can use the attr-input-class to set the input class, but it only accepts a string. Is there a way to set this class dinamically?
For example, I want a different the background color when the input has content and when the input is empty.
Thanks!
Hi. Thanks for the great plugin!
But one thing that Im missing: how can I customize the class, placeholder and other stuff on the input element?
I copy+pasted from this repo's bower.json into my project's:
{ "dependencies": { "allmighty-autocomplete": "1.0.140706" } }
But bower complains it can't find the requested version:
$ bower install allmighty-autocomplete
bower not-cached git://github.com/JustGoscha/allmighty-autocomplete.git#1.0.140706
bower resolve git://github.com/JustGoscha/allmighty-autocomplete.git#1.0.140706
bower not-cached git://github.com/JustGoscha/allmighty-autocomplete.git#*
bower resolve git://github.com/JustGoscha/allmighty-autocomplete.git#*
bower checkout allmighty-autocomplete#master
bower resolved git://github.com/JustGoscha/allmighty-autocomplete.git#b9431a68b1
bower ENORESTARGET No tag found that was able to satisfy 1.0.140706
However, specifying "allmighty-autocomplete": "*"
works.
I'm not terribly familiar with bower, but from the error message, it sounds like it's looking for a git tag named 1.0.140706 (which does not exist).
Hi there,
I'm trying this out, since I was looking for an autocomplete directive to use in my app.
One problem I have (design wise) is that the array your directive expects is of type string.
I think it would be more flexible if this was an array of objects, and then you could provide options for what property within the array is the label and what property is the value.
A very common use case for this is to get the id of the thingy inside the auto-complete box. The string is often not unique and not all that useful.
Is there a way to do this with your directive? And if not, I suggest adding such a feature.
Thanks for listening.
how to set default value from ng-model?
Currently, they are rendered in the .autocomplete div, but I was thinking that maybe they could be more useful in the input within the .autocomplete.
Case in point:
<autocomplete ... attr-class="form-control"></autocomplete>
renders:
<div class="autocomplete form-control">
<input ...>
</div>
Working with bootstrap or another css framework requires adding the class to the input itself. Currently there's no way of doing that.
TL;DR: move the class and id attributes to the input inside .autocomplete
I have now a bug, when I don't set ng-model and start typing I get the error:
Error: Non-assignable model expression: undefined (directive: autocomplete)
at Error (native)
at i (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:43:354)
at Object.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:43:467)
at Object.e.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:90:233)
at Object.e.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:92:431)
at HTMLInputElement.Va.i (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:120:156)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:24:49
at Array.forEach (native)
at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:6:470)
at HTMLInputElement.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:24:20)
Making a minified version of it.
imagine that i have this three phrases on the scope of autocomplete
"cambiar a prepago"
"cambiar de empresa"
"chat con representante"
If i start typing in my search input the three letters "pre" this three results will match with the phrase "pre", but I think that the only correct is the first one.
I never want to match with something in the middle of the word, this is not how people searchs.
so, is there any way to match my search phrase only with the beginning of my suggestions?
Apparently this component is missing some version info to properly configure it for bower packaging, and as a result I couldn't use it from rails-assets to easily manage it in my rails app.
Could you fix this please?
http://bower.io/search/?q=allmighty
https://rails-assets.org/components
When trying to add the package in rails-assets it throws this error:
"allmighty-autocomplete has no versions defined. Please create an issue in component's repository."
So I made a version of this with an onBlur selector. I've also made a lot of other customizations that are very specific to my project which may or may not make sense to put into a PR.
The modification which makes the most sense imo to include is an on-blur attribute which runs a function when the input field loses focus. Similar to on-select.
I made a directive that you can pass a function/value into autocomplete so that when it is true it focuses on the input field.
Let me know if you'd be interested in either of these. Would just submit a PR but it'd be some work to make a version that only has specific modifications so I wanted to pass it by you first.
Following values of bower.json are incorrect:
"main": ["./script/autocomplete.js"]
Reason: I use grunt wiredep module and mentioned settings used for dependencies infection. As a result my result index.html don't have link to css
Solution: Will be good to replace mentioned settings of bower.json to
"main": ["./script/autocomplete.js", "./styles/autocomplete.css"]
I have a one to many relationship where a product belongs to a vendor. In my new product form I have a vendor_id which I would like to autocomplete allowing the user to search for a vender name. When that vendor name is selected, instead of the name inserted in the field, I would like the id in the field. Either that or a way to insert the vendor_id into a hidden field. Is there a way to do that with this directive?
Hi, I simply downloaded your repo and opened index.html and I get the following error:
ReferenceError: onType is not defined
at Object.fn (file:///home/christian/Downloads/allmighty-autocomplete-master/script/autocomplete.js:53:12)
at Object.e.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:90:356)
at Object.e.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:92:431)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:16:236
at Object.d [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:27:474)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:16:143)
at xb (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:16:367)
at rc (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:15:491)
at HTMLDocument.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:178:350)
at c (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:4:26051)
Actually i want to display name(customer_name) only during listing in autocomplete, then after select those name, store another value(maybe customer_id) instead.
Hi,
on-select directive doesn't work, and i couldn't figure out why. Here is my code.
HTML:
<autocomplete attr-class="autocomplete" on-select="showProduct" ng-model="product"
placeholder="Arama yapın"
click-activation="true" data="products" on-type="typed"></autocomplete>
Javascript :
$subscope.showProduct = function () {
console.log('test');
};
$subscope.typed = function(typedString) {
console.log('typed : ' + typedString);
};
Here typed function works but when i selected the suggested item(hit enter) showProduct function doesn't work.
I'm getting the following error when trying to use allmighty-autocomplete:
Error: [$sce:itype] http://errors.angularjs.org/1.2.16/$sce/itype?p0=html
If I mess with the template html file and remove lines that contain $index, the error goes away, so I'm assuming that's the invalid HTML, but I'm unsure how to make it valid (or why this is happening for me but not for others). Any suggestions?
Thanks!
Is it possible to add up down key scrolling of ng repeat list? If you limit the size of of un ordered list block to height of say 300px with overflow set to auto it does add a vertical scroll bar to drop down list.
Mouse scrolling works fine and list gets updated as you scroll mouse but if you try with keyboard up or down arrow key it does not scroll list view past the end boundaries.
Use grunt for automated build process running tests etc
I try to execute the demo app, but doSomething() function looks like mute.
My console.log('test'); inside is not triggered.
The html :
<autocomplete ng-model="result" attr-placeholder="type to search movies..." click-activation="true" data="movies" on-type="doSomething" on-select="doSomethingElse"></autocomplete>
The JS inside my controller :
$scope.doSomething = function(input) {
console.log('test');
}
EDIT:
After debugging test, in autocomplete.js, $scope.onType is undefined
Hi, I need to clear the selected value of inputtext once a button is clicked. Can you please suggest how to do this. I have tried few approach but not working. Everything else is working fine. I'm using below code for autocompletion
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.