justgoscha / allmighty-autocomplete Goto Github PK

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.

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.

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.

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.

$ 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

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.

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

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.

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

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.

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!

Autocomplete never closes when input lose focus in IE8.

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

I would like to get rid of the jQuery dependency, so the library is more lightweight and easier to setup.

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

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!

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?

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

Should not be open, only on typing.

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

Making a minified version of it.

i want use ng-pattern, help me !

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.

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 = {}));

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.

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

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?

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?

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?

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

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"]

It would be great if you could limit the number of returned results as well.

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).

how to set default value from ng-model?

Add test cases.

Start looking here:
https://egghead.io/lessons/angularjs-testing-overview

Move on to this, maybe:
https://egghead.io/search?q=testing

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 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) 

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.

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."

Missing "var" at
https://github.com/JustGoscha/allmighty-autocomplete/blob/master/script/autocomplete.js#L107

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']]);
});

});

Should require minimal code changes.

Latest version with highlights (not on the demo link), typing [ in the input leads to this error:
SyntaxError: Invalid regular expression: /([|[)/: Unterminated character class

Trying to make a simple example using the autocomplete directive and I receive this message.

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!

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)