siyfion/angular-typeahead

A very simple Angular.js wrapper around the Twitter Typeahead library.

angular-typeahead's Issues

TypeError: Cannot set property 'highlight' of undefined

I am trying to use angular-typeahead in my app

This is the code of app.js file:

var myApp = angular.module('myApp', ['ngRoute','siyfion.sfTypeahead']);

myApp.factory('websitesSvc',function($http, $log, $q) {
return {
    getwebsites: function(){

        //Create a promise using promise library
        var deferred = $q.defer();

        $http({method: 'GET', url: '/api/websites/'}).
            success(function(data, status, headers,config){
                deferred.resolve(data);
            }).
            error(function(data, status, headers,config){
                deferred.reject(status);
            });

        return deferred.promise;
    }
};
});

myApp.controller('MyCtrl', ['$scope','websitesSvc','$timeout',
function($scope,websitesSvc,$timeout) {

$scope.searchString=null;


websitesSvc.getwebsites().then(function(websites){
 $scope.websites = websites;
}); 

$timeout(function() {
var websites = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.domain_name); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
local:$scope.websites,
});

// initialize the bloodhound suggestion engine
 websites.initialize();

$scope.numbersDataset = {
displayKey: 'domain_name',
 source: websites.ttAdapter()
};

// Typeahead options object
$scope.exampleOptions = {
 highlight: true
}; 
},1000);

 }
]);

Adding delay so that the services are executed first and then the data fetched can be passed to typeahead for search suggestions.But I am getting following errors in console .
How should I change my code to debug this?

typeahead input with default data returns $dirty = true

please see this plunkr http://plnkr.co/m73ZnijNfF2H6HsjbuCu

all inputs are in separate forms and the first two forms use angular-typeahead. the second two do not.

you can see in the first input that $pristine = true and $dirty = false. in the second where there is a default / existing value in the typeahead input the $pristine = false and $dirty = true.

You can see in the last two forms that the default angular behavior seems to be to load a form with default / existing values as $pristine = true and $dirty = false.

I am guessing that this falls under the angular-typeahead's umbrella as a wrapper for angular and not the actual typeahead project

Is this a known issue? intended behaviour? is there a workaround? might it be an easy fix for you guys?

[object Object] in new v0.1.1

Hi,

same as 3 month ago in #17 and #15 if the model is set the value displayed will be [object Object] I made a plunkr here http://plnkr.co/edit/rtyGVJoWgKHhFobJceZ3?p=preview

It's the same one as the one given as an example but $scope.selectedNumber = { num: 'one' };

Any ideas ?

Thanks,
Simon

Cannot set property 'highlight' of undefined

When ng-controller is destroyed (or not initiated yet) appears an error:

----- TypeError: Cannot set property 'highlight' of undefined ------

It appears because you pass an [undefind] array to typeahead.js plugin when dataset is not defined.
The string:
(angular.isArray(scope.datasets) ? scope.datasets : [scope.datasets]) || [];
will never return the empty array, but it should for correct work of plugin

Looking for a package maintainer...

Quite simply, I haven't had the time to keep this library up to date, or as robust as it should be, especially since I now am no longer using AngularJS in my day-to-day projects. Ideally, I'd like someone else to help maintain the project & I'll try to help as often as I can. So if you would be interested in taking a bit of a lead role on this, then please comment here...

Reinitialize Typeahead with new source

Firstly, many thanks for this angular method of using typeahead!

My use case has brought me to a grinding halt. Ill try to describe it as best i can..

Essentially, I have two 'sources' from which I want typeahead to suggest from. I am using the bloodhound engine. So, I have initialized two Bloodhound objects - one, numbers.initialize() and two, letters.initialize(). Problem is, when I intiialized typeahead at fist using source:numbers.ttAdapter() it obviously works as expected.. But, on selection of an item from typeahead, I want to change the source to source:letter.ttAdapter(), since according to my use case, I want another source to be used for suggestion. What could be the best way to do that? Any way to reinitialize typeahead programatically with a new source?

Cannot type Chinese.

Hello, I found there is a problem when type Chinese. To create 你，Chinese would type "ㄋ一ˇ" and then use enter. But with element bind the input event, I always got "ㄋ一ˇ" directly in input and had no need (chance) to use enter to create the real word 你.

I switched bind 'input' to 'keyup', and the issue is gone. But I saw the comments in the src about input-event. Though input could avoid the special keys, but since we use twitter typeahead.js, it has dealt with it (https://github.com/twitter/typeahead.js/blob/master/src/typeahead/input.js), why should we still use input event?

Thanks!

Not Able To Have Spaces

I am not sure if this a normal type ahead issue or just with this directive, but I am unable to have spaces. You can reproduce with this example in a controller.

$scope.statesData = {
name : 'states',
local : [ "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma"]
};

Input field blanked when loses focus without any user changes

Please see this issue on the typeahead repo twitter/typeahead.js#860

I do not know if it is an issue with typeahead or with angular-typeahead or if it is intended functionality. I can recreate the issue I am having with your demo plunkr here twitter/typeahead.js#860

click on the input field which contains three and then click or tab away and watch the input field get blanked

conflict with isolate scopes from other directives

I just raised a little annoying bug that I cannot think how solve it (yet).

Test case: if you have a input with sf-typeahead and, in another element, another directive that isolates the scope and directly manipulate the ngModel with "=" bi-directional modifier, then the model is always the same value typed in input, and not the object from datum.
I debug-traced this issue and figured that occurs in $parsers function, that's get called twice in these cases, and in second time the value passed through fromView is the input typed value instead of object. Removing the other directive (or making them inherit scope) all works as expected.

Here's an example code that raises this issue:

angular.directive('someDirective', function () {
    return {
        scope: { value: '=prop' }
        link: function (scope, elem, attr) { 
             // ...
        }
    }
}

// dataset
[{num: 'one'}, {num:'two'}]

<input type="text" sf-typeahead ng-model="myModel" />
<div some-directive prop="myModel"></div>

Typing one and selecting the suggestion always makes myModel = 'one' instead of ngModel = {num: 'one'}
I'm working on it to try to solve :)

The Bare Bones usage example specifies that you use siyfion.sfTypeahead but I believe it should be siyfion.ngTypeahead

Selecting a completion clears the input field until input loses focus

Using Angular 1.2.1 and angular-typeahead 0.0.8.

To reproduce: type in an input, click on a suggested completion. The field value should be cleared. Now click outside of the field so that it loses focus. The completion value should now be visible in the field.

Two-Way Binding and Deleting The Field

I'm having an issue where when I use the two-way binding feature by setting the model, and then deleting the entire field, the model isn't updating to reflect the data is deleted.

This can be reproduced on the demo
Steps:
http://plnkr.co/edit/cMvm7Z4REuIP69Uk4Tzz?p=preview

1. Press the 'Set value (two-way demo)' button
2. Verify that the model label is updated to 'Model: { "num": "seven" }'
3. Select the entire value 'seven' in the input box and delete
4. The model label is still 'Model: { "num": "seven" }'

Note. On step 3, if you delete 'seven', one character at a time, the model is updated

ReferenceError: Bloodhound is not defined

When I try to use this module, I get the error

ReferenceError: Bloodhound is not defined

I have referenced the version 0.11.1 from npm https://www.npmjs.com/package/typeahead.js

unable to get the typeahead:selected and typeahead:autocompleted events

Hi

I am not able to figure out how to subscribe to the typeahead:selected and typeahead:autocompleted events in my controller.

Is there any inbuilt directive to do the same? I am trying to use the $scope.on to subscribe to the same but through this i wont be able to determine which control has fired the event and i also need to pass some parameters to perform some functions. I also tried to create a custom directive but nothing seems to happen doing so. I am new to angular.js so dont have much expertise in it. Could you please help me out on this?

Cursor position issues with Chrome on Android

When using this plugin with Chrome on Android, the cursor position gets screwed up and jumbles what I'm typing. If I type "we", it comes out "ew". If I have "abcdef" and I hit backspace twice, I get abcd and the cursor at the front of the textbox.

Removing the call to setCursorPosition fixes the problem and doesn't cause any noticeable issues, at least on Chrome (Android and Desktop), FireFox, or IE 11, 10, & 9.

I was hoping you could explain the necessity of this method? Is it for legacy IE support?

selected event returns dataset as string, not object

so it means i get undefined during

if (typeof datum == 'string' || datum instanceof String) {
scope.ngModel = datum;
} else {
scope.ngModel = datum[dataset.valueKey];
}

My solution is to simply return the datum to the ngModel.

This is using angular 1.2.1.

This likely affects the autocomplete event as well.

ng-model set to object instead of value

The dropdown apparently expects data in [{value:"foo"}, ... ] format, if you pass array of strings it won't work (shows "undefined" as values in dropdown) . However, when value is populated from dropdown it sets ng-model to that {value:"foo"} object - not string. I have modified the updateScope method to set suggestion.value , but I am not sure what is the right fix.

Use ng-model-options' debounce

Currently angular-typeahead does not wait if an ng-model-options="{ debounce: 5000 }" is set on the element; it will search immediately.

Let me know if you need a Plunkr.

Improve ngModel two-way binding support for multiple datasets

Currently the way in which the datum is selected is using a selectedDataset variable that's set in a very flimsy way. This needs improving when I get some time to think about it some more.

promise in controller

http://plnkr.co/edit/qCI09p2p8xXbrxD0F0e9?p=preview

what if I have a promise in my controller, similar to a timeout shown above, it might take some time to resolve before I have the data for typeahead.

however, it will not work anymore.

I tried to add a watch in the code, but it does not seem so nice...

Tag and version difference ?

First of all thanks for good work. I was wondering why didn't you tag the newest version (2). The latest tagged version is 0.1.4 so I cannot get the version 2 using bower. Is the version 2 unstable and that is why you decided not to tag it ?

Conflict with ng-pattern

I created a plunkr here: http://plnkr.co/edit/JVWR56JCv18XV16LWHVO?p=info

Basically if you have a pattern for exact absolute match (meaning, the entire string must match a certain regexp), and you also have a typeahead enabled on that same input, if what you are typing breaks the regex, the field gets emptied. I think it's because of the way the typeahead directive sets the model each time it changes and Angular not wanting you to set a model value that's invalid.

On the plunkr try typing in "Foo", and then add a slash or colon or ampersand and you'll see it in action.

Typeahead 11.x support?

Should we stick to using typeahead 10.x for angular-typeahead or is it safe to start using 11.x that was recently released?

Testing with Karma fails

I'm trying to test a controller that depends on this component with karma and phantomjs.

I get this error:

PhantomJS 1.9.7 (Linux) service check the existence of Pulse factory FAILED
    Error: [$injector:modulerr] Failed to instantiate module pulseApp due to:
    Error: [$injector:modulerr] Failed to instantiate module pulseControllers due to:
    Error: [$injector:modulerr] Failed to instantiate module siyfion.sfTypeahead due to:
    Error: [$injector:nomod] Module 'siyfion.sfTypeahead' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

This seems to indicate that siyfion.sfTypeahead is failing to load (from here: https://docs.angularjs.org/error/$injector/modulerr ). If I remove the siyfion.sfTypeahead dependency from my controller module dependency list, everything seems to work fine. I get type-ahead functionality in chrome when running this manually. I looked at the typeahead.js karma config file (here: https://github.com/twitter/typeahead.js/blob/master/karma.conf.js ) and tried to include everything it included. Wondered if you had any insight.

Here's my bower.json:

{
  "name": "pulse-crud",
  "version": "0.0.0",
  "homepage": "https://github.com/angular/angular-seed",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "1.2.x",
    "angular-mocks": "~1.2.x",
    "jquery": "1.10.2",
    "bootstrap": "~3.1.1",
    "angular-route": "~1.2.x",
    "angular-resource": "~1.2.x",
    "angular-animate": "~1.2.x",
    "angular-typeahead": "~0.2.x"
  },
  "devDependencies": {
  "jquery": "1.10.2",
  "jasmine-jquery": "~1.5.2"
  }
}

Here's my karma.conf.js:

module.exports = function(config){
  config.set({

    basePath : '../',

    files : [
      'app/bower_components/angular/angular.js',
      'app/bower_components/jquery/jquery.js',
      'app/bower_components/angular-route/angular-route.js',
      'app/bower_components/angular-resource/angular-resource.js',
      'app/bower_components/angular-animate/angular-animate.js',
      'app/bower_components/angular-mocks/angular-mocks.js',
      'app/bower_components/typeahead.js/dist/bloodhound.js',
      'app/bower_components/typeahead.js/dist/typeahead.jquery.js',
      'app/bower_components/jasmine-jquery/lib/jasmine-jquery.js',
      'app/bower_components/jasmine-ajax/lib/mock-ajax.js',
      'app/bower_components/angular-typeahead/angular-typeahead.js',
      'app/js/**/*.js',
      'test/unit/**/*.js'
    ],

    autoWatch : true,

    frameworks: ['jasmine'],

    browsers : ['PhantomJS'],

    plugins : [
            'karma-phantomjs-launcher',
            'karma-jasmine'
            ],

    junitReporter : {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    }

  });
};

Override value of typeahead input after typeahead:selected event

Hi,

I'm able to override the value of the ngmodel when the typeahead:selected event fires but when the element lost focus ("blur") the original value is reverted although the ngModel still has the modified value. I guess this is on typeahead.js behaviour not the directive. So from the documentation, I would like to try callling the typeahead("val", myval) but the problem is that the target element is not being returned by the directive. Isn't it supposed to return also the target elemen just like what typeahead does on "typeahead:selected" event?

Thanks

Angular-typeahead interferes with cursor position

Cursor always jumps to the end of input, if user prepends or inserts a char. Reproducible in live demo.

Why isn't there focus first typeahead support?

In the example of typeahead at this site https://angular-ui.github.io/bootstrap/

register in npm?

can you register this in npm so I can do npm install angular-typeahead? we are trying to move everything from bower to npm and so far this is the only dependancy not on npm

Text re-appears in input box after clearing the model

To reproduce the issue - in the official plunkr sample (http://plnkr.co/edit/cMvm7Z4REuIP69Uk4Tzz?p=preview), do the following:

-Type something in the editable model input box.
-Click 'Clear value to null'
-Press the input box (return focus)
-Press outside the input box (lose focus).

The cleared text re-appears in the input box (despite the model being null).
BTW - it's not directly related to clearing the model - reproduces even if you just change the model (set it to some text instead of null).

Issues with ng-repeat

I'm not sure if this is an issue with the directive, or is just a result of how/when angular creates scopes, but if you put sf-typeahead in an ng-repeat block, the ng-model updates do not bubble out to the root object defined in your controller.

I forked your plunkr to demonstrate:
http://plnkr.co/edit/U4YPJm4kqBACVfFu80ri?p=preview
You'll notice that the Model: prints inside the ng-repeat update correctly, but the ALL: print at the top of the page never changes.

The only way I've been able to update the array defined in the controller is to listen to the typeahead:selected event and then update accordingly. Would love to hear if there's a better solution, as its not trivial to determine which object was modified.

EDIT:
This issue can be resolved by always using a member attribute in the ng-model call (this is an issue that effects any ng-model inside an ng-repeat, and is not specific to this project):
http://plnkr.co/edit/9ksryMaFUqQfeXTAeCEK?p=preview

Firefox focus bugfix breaks update in Chrome

The patch from #67 by CyborgMaster blocks some model updates in Chrome (Version 43.0.2357.130 (64-bit))
Example: I'm clicking to one of the suggestions in the dropdown
Expected outcome: Model to be updated based on the selected suggestion
Current behaviour: The change to the value will be reverted by this firefox fix line when called from NgModelController.$$parseAndValidate, so writeToModelIfNeeded at the end will not do anything, thinking the value stayed the same...

(If the solution is to only run the line for FFox, https://github.com/srfrnk/ng-device-detector might be useful here)

Android support

Will this work in Android (using phonegap?)

I'm trying but I can't seem to get it to work

Possible to disable typeahead?

Apologizes if I overlooked this, but is it possible to destroy or remove a typeahead after it has been initialized. Example is if it has been used (hint or selected from drop down), to be able to turn it off.

Thanks,
Brandon

Best practices

I noticed this directive is called ngTypeahead. The ng prefix is considered the "official" angular namespace. A better choice would be to choose your own prefix, perhaps siy and use that instead.

Cheers!

Doesn't work with twitter/typeahead.js v0.10.0 onwards

same plunk, just updated...

http://plnkr.co/edit/CYQFHr

Set model

Hey,

I've been trying to set the model but without success, all I get is the [object Object] in the input, even though the model is set exactly as the model I get by manually selecting an option.

Some css for the plunker example

Some css for the plunker example would really show what the plug-in is about.
Something like:
http://plnkr.co/edit/AzelzUxJj1G5Bcxrkfpf?p=preview

input has [object Object] value

In LIVE DEMO example input has value '[object Object]' when I hit right arrow after adding few chars.

Hitting tab inserts [object Object] into input field

It should be selecting the highlighted result, but instead the [object Object] is rendered on top of the input field's content.

Field values shown as [object Object] since Angular 1.3.0-rc0

In Angular 1.3.0-rc0, using the latest typeahead, fields are showing up as [object Object].
How can I set the view value as just the displayKey?

Not able to work with datasets from the server

I am using a django backend which returns JSON data for all the City objects

So this is my markup :

<input type="text" class='sfTypeahead' datasets='dataSet' ngModel='testname' />

the dataSet is defined in my controller like this :

$scope.dataSet = {
    name : 'cities',
    local  : $scope.allCities
}

So the allCities variable is what I get from django as a JSON response .

When I render the page, the directive is already called so it throws an error
TypeError : cannot get 'name' of undefined
because at that point of time there is no $scope.Cities

Is there a workaround to this ?

Include dependencies in bower / incorrect links in readme

Under: https://github.com/Siyfion/angular-typeahead#getting-started

bloodhound.js v0.10.x

is linked to twitter typehead instead of bloodhound js.

Can the correct versions of the dependencies just be automatically installed when you run bower install?

Getting the value of the typeahead

Hey,

How to you get the value entered into the typeahead in the scope. For example, if I select "Brick Tamland", where can I access that value?

Do I use ng-model? e.g.

input type="text" ng-model="person" class="ngTypeahead" datasets="exampleData"

{{ person }}

Firefox focus fix causes form to be invalid

The fix made for the firefox workaround causes the field to be invalid as it can return 'undefined'.

When the page is initially loading the parse function is executed and the check

if (fromView === element.typeahead('val')) return ngModel.$modelValue;

evaluates true and therefore returns $modelValue. The problem is that $modelValue can be undefined and returning undefined from a $parser signifies that the field is invalid.

Get input datum

I can't figure out how to get the datum that's supposedly being updated in ngModel, its not updating the variable i'm using at ng-model.

Does not work with ng-submit in form fields

If you use this in a form and use ng-submit to pull data from the ng-model object, the ng-model object is never set. ng-click works fine.

Here's some code. When using ng-submit, the foo model is never updated (so that saveIt can access it), whereas with ng-click it is. However, with both the {{}} notation in the template works fine.

 // in controller
 $scope.saveIt = function() { 
    console.log($scope.foo)
 }

Below doesn't work:

 <form class="form-horizontal" role="form" ng-submit="saveIt()">
 // more ... form stuff
    <input id="hoods" type="text" class="sfTypeahead" options="exampleOptions" datasets="exampleData" ng-model="foo">
 <input type="submit" class="btn btn-primary" value="Save"/>

Below works:

<form class="form-horizontal" role="form">
 // more ... form stuff
    <input id="hoods" type="text" class="sfTypeahead" options="exampleOptions" datasets="exampleData" ng-model="foo">
 <button ng-click="saveIt()"  class="btn btn-primary">Save</button>

typeahead:selected event when using multiple instances of this directive

If I'm using this directive in multiple places on the page, how do I bind to the typeahead:selected event of a specific directive?

Right now in my controller I have $scope.$on 'typeahead:selected', (e, suggestion, dataset) ->, but that is not specific if I'm using many instances of this directive on the same page.

Clear angular model value when typeahead input text changed by user

I use complex objects as a data source for typeahead ({id: 123, name: 'abc'}) with datasets.valueKey and complex object in ngModel binding. Unfortunately the directive doesn't handle clearing ngModel value in this scenario:

1. user searches for something and selects value from typeahead result list (ngModel value is correctly set)
2. user changes input text to something different, which triggers new typeahead search, but user doesn't select anything => ngModel value stays set from step 1 even though the value in typeahead input field is entirely different

I'd prefer if the ngModel would be cleared in such case. Is there any typeahead extension point, which could be used to implement such behavior?

Firefox loose the value on focusout

Step to reproduce:

1. Open the live demo in Firefox
2. Type seven
3. Select the value in the combobox -> Model: { "num": "seven" }
4. Click elsewhere on the page -> Model: "seven"