darylrowland / angucomplete Goto Github PK

AngularJS Autocomplete Directive

JavaScript 36.35% CSS 20.25% HTML 43.41%

angucomplete's Introduction

angucomplete

A simple but powerful AngularJS directive that allows you to quickly create autocomplete boxes that pull data either from a server or local variable.

To see a demo go here: http://darylrowland.github.io/angucomplete

NOTE: I no longer actively mantain this repository. I've started using ReactJS now and its a breath of fresh air compared to AngularJS. If you're still using Angular and need a autocomplete component I'd encourage you to look at this fork of my original Angucomplete: https://github.com/ghiden/angucomplete-alt

###Key Features

Show just a title, a title and a description or a title, description and image in your autocomplete list
Deliberately minimally styled so you can customise it to your heart's content!
Reads JSON data and allows you to specify which fields to use for display
Simple setup - e.g. to pull data from a server, just set the url parameter

Getting Started

Download the code, and include the angucomplete.js file in your page. Then add the angucomplete module to your Angular App file, e.g.

var app = angular.module('app', ["angucomplete"]);

Local Usage

<angucomplete id="ex1"
              placeholder="Search countries"
              pause="100"
              selectedobject="selectedCountry"
              localdata="countries"
              searchfields="name"
              titlefield="name"
              minlength="1"
              inputclass="form-control form-control-small"/>

Remote Usage

<angucomplete id="members"
              placeholder="Search members"
              pause="400"
              selectedobject="testObj"
              url="http://myserver.com/api/user/find?s="
              datafield="results"
              titlefield="firstName,surname"
              descriptionfield="email"
              imagefield="profilePic"
              inputclass="form-control form-control-small"/>

Description of attributes

Attribute	Description	Required	Example
id	A unique ID for the field	Yes	members
placeholder	Placeholder text for the search field	No	Search members
pause	The time to wait (in milliseconds) before searching when the user enters new characters	No	400
selectedObject	Where to store the selected object in your model/controller (like ng-model)	Yes	myObject
url	The remote URL to hit to query for results in JSON. angucomplete will automatically append the search string on the end of this, so it must be a GET request	No	http://myserver.com/api/users/find?searchstr=
datafield	The name of the field in the JSON object returned back that holds the Array of objects to be used for the autocomplete list.	No	results
titlefield	The name of the field in the JSON objects returned back that should be used for displaying the title in the autocomplete list. Note, if you want to combine fields together, you can comma separate them here (e.g. for a first and last name combined)	Yes	firstName,lastName
descriptionfield	The name of the field in the JSON objects returned back that should be used for displaying the description in the autocomplete list	No	twitterUsername
imageuri	A http location or directory where images reside	No	http://localhost/images/
imagefield	The name of the field in the JSON objects returned back that should be used for displaying an image in the autocomplete list	No	pic
minlength	The minimum length of string required before searching	No	3
inputclass	The classes to use for styling the input box	No	form-control
localdata	The local data variable to use from your controller. Should be an array of objects	No	countriesList
searchfields	The fields from your local data to search on (comma separate them)	No	title,description

Running test suite

In order to run tests clone repository and run following commands within repo's directory:

bower install
grunt

License

The angucomplete project is covered by the MIT License.

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

angucomplete's People

Contributors

Stargazers

Watchers

Forkers

iransousa stevenharman metalgvc mixcas ghiden justgoscha shukii yasuhiroyoshida kaspereden leejsinclair ardani everettqin veerendrakumar-github lukaszb ograycode jsmale ilsenem chrisjbrown tenfold askhogan grucha mongus regou dancek mbst educarm mdgart lilong paulopsr kaiocesar picardy piraman fxding shiftagent salgua sdavara freeart sideshow waymondo hackystack antyadev efecan 2uinc acodealchemist surfista misabitencourt willyxiao yesnomore lawpath karthikc oleksandr-parfenyuk dagron schechter mquach17 danielj86 loverajoel snanda85 darrylhebbes lulujiang brenothales ericparshall kiakaa zhang421755327 igorbi nimesh-hathiwala rhud paterczm paulormart ahsanayaz h4xx02z yankee42 codymaines edyonil malpicaolga nbently rademade howtomake codegeeks marob daaru00 brandon-dewitt danielfh mcfattydk kuchen1984 m-beliaev chrigu yogitunes peterbersani jamesft andrerafaelmezzalira jorgerdz mulderu tomv i-kaplin ew1773 nvthanh1994 mnxoid 5un phyrionx padic

angucomplete's Issues

relative urls for remote

Can I use something like that:
<angucomplete id="categories"
(ex:rock,indie,pop) No space allowed."
pause="400"
selectedobject="categories"
url="api/posts/findTags?name="
titlefield="description"
inputclass="form-control form-control-small"/>

insted of passing http://localhost:3000/api/posts/findTags?name=

thanks

Better remote usage

This seems like better remote usage in the case that someone returns an array of JSON

                            if($scope.dataField) {
                                $scope.processResults(responseData[$scope.dataField], str);
                            } else {
                                $scope.processResults(responseData, str);
                            }

pre populate the search input

Hi.
Is there anyway that I pre-populate the searchStr?

In my app, when user search for something she needs to pick other stuff in the search and press the enter. then page refreshes and load the new data. I need to show the searchStr that user has entered beforehand in the search box.

I can get the search string via a server side language such as PHP or Rails then I tried to set the $scope.searchStr = $_GET['keyword'], I can see when I am debugging with firebug that value had been passed to the value attribute of the field however it doesnt show anything on the search field.

Can you please suggest a solution for it? Thanks.

Include angular

Hi,

Why not include the angucomplete.css reference in bower.json? I have to change this file manually to grunt wiredep task includes the css in the index.html.

"main": [
 "./angucomplete.js",
 "./angucomplete.css"
],

instead of

 "main": "./angucomplete.js",

Cheers

Alternative implementation (if you wanted one)

Back when this module was not being actively developed/maintained, we ended up writing our own version. Its used by us in prod, but taken ages to get the approval to release it.

https://github.com/voidberg/ngcompletr

Its a very similar idea, but a different implementation.

As angucomplete is now more active, so its likely this won't be of interest to many people - but felt we wanted to share anyway!

Auto select when only 1 result

Can you add an option that if only 1 result returned it will auto select it?

Thanks!

Filling the angucomplete input field in view from controller

Hi
I have angucomplete input field : Name
which contains a list of names.
How can I fill the input field from the controller itself.

getting text from input

can i get typed text in angucomplete input from my controller when any object is not exist and is not returned ? something like "ng-model"?

Documentation on adding links to results

I have implemented angucomplete however I can't seam to build the links to profiles like I need too.

Why jquery dependency ?

I didn't found the usage for jquery dependency in your bower.json. Where did you use?

https://github.com/darylrowland/angucomplete/blob/master/bower.json#L26

Extending behavior of selectResult?

Admit, I'm new to AngularJS and not sure how to do a lot of things yet but I would like to extend the actions of selectResult to fetch (callback) data and expose a group of edit controls.

Without copying the entire source of angucomplete.js into my app.js and then modifying as needed, is there an easy way to subclass or overwrite just the selectResult function without changing the original source?

Thanks in advance for any guidance...

Autofocus

hi this is nice plugin . by the way i want to know how to autofocus ?

Bump version

Please bump version to download with bower.

Results don't show on input focus

Steps to reproduce:

Type some text in the input box. Results are shown.
Click out of the input box
Click in the input box again. Results are not shown

is it possible adding the result as tag ?

hi.. is it possible for adding any result as tag in an input, so in input there are more than one result from autocomplete ? thanks

custom 'no results found' text

I've been working on a project that using this component.. greate directive ! by the way is there a way to set a custom message if there are no record inside the array field on this component ?

for example if I search a non existing record, usually there will be a message that says "No results found" instead of that message, could I set it like "No records found" ? is there a way to achieve that ?

$sceProvider <- $sce <- angucompleteDirective Issue

Hi I am getting $sceProvider <- $sce <- angucompleteDirective issue while using your module.

Included angucomplete.js in my file and used the angucomplete html code in my HTML. It thros below error. Could you please help resolving it?

Error: Unknown provider: $sceProvider <- $sce <- angucompleteDirective
at Error (native)
at http://localhost:8080/lib/angular/angular.js:2734:42
at Object.getService as get
at http://localhost:8080/lib/angular/angular.js:2739:45
at getService (http://localhost:8080/lib/angular/angular.js:2862:39)
at Object.invoke (http://localhost:8080/lib/angular/angular.js:2880:13)
at http://localhost:8080/lib/angular/angular.js:3718:43
at Array.forEach (native)
at forEach (http://localhost:8080/lib/angular/angular.js:130:11)
at Object. (http://localhost:8080/lib/angular/angular.js:3716:13) angular.js:5754
casualshirts service

Eval?

I found your autocomplete via ngModules its pretty sweet! & easy to use..

But my question is, what was the reasoning behind using eval when you can just use bracket notation instead and achieve the same results instead of sprinkling eval around?

Thanks
-David

multiple angucompletes in same scope issue

i have 2 angucompletes in the same scope. One of them has a minlength of 1 and the other of 3. The 2nd one's minlength keeps overwriting the first one. The way angucomplete is setup now only allows 1 angucomplete per scope.

Pressing Enter or Down Arrow when no input is provided caused an error

Open the demo page.
Set focus to one of those input field.
Hit Down Arrow or Enter throws "Uncaught TypeError: Cannot read property 'length' of undefined"

I'll be making a fix pull request after you merge my previous pull request. Sorry I should have requested my pull request with a branch, not on my master, so that I can create a separate pull request for this.

replace the contains search to start with search

Hi,
i'm not sure if it's supported,

but i want to change the autocomplete from "contains" type to "start with" type.
I mean, it will find matches only to the words start with, but not contains as it now.

Any suggestions?

Not able to add multiple autocomplete directives in the same scope.

i am not able to create multiple auto completes in the same scope.

example:

        <angucomplete id="ex1"
                      placeholder="test1"
                      pause="100"
                      selectedobject="selectArea"
                      localdata="countries"
                      searchfields="name"
                      titlefield="name"
                      minlength="1"
                      inputclass="form-control form-control-small"/>
        <angucomplete id="ex2"
                      placeholder="test2"
                      pause="100"
                      selectedobject="selectedLocation"
                      localdata="countriesa"
                      searchfields="name"
                      titlefield="name"
                      minlength="1"
                      inputclass="form-control form-control-small"/>

only loads the first one.

Problem when selecting result using mouse click

I have an issue when selecting auto complete result using mouse click into input form. Sometime it work, but mostly it doesn't work. I wonder if there are some problems with the css style or in my directive usage.

ng-model hard-coded string

I was wondering how I could set the ng-model of the input-field at my own. I thought the selectedObject would be do that thing but then I saw that the ng-model was hard coded ("searchString"). Is there a possibility to change that or am I doing something wrong?

use remote url with a function (like ng-change)

Hello!
thanks for this directive.

I want to use the remote version of the directive. But, i can't put function directly in remote-url and remote-url-data-field attributes because in backend, i have rest service that attending a jwt token and two or more paramaters.
The service method is like that :

getByFullname: function(fullname){
AuthHttp.get('/rest/' + ProfileService.getCurrentUser().id + '/persons/fullname/' + fullname).success(function (data) {
// the promise gets resolved with the data from HTTP
deferred.resolve(data);
});
// return the promise
return deferred.promise;
}

and in my controller, i have a function wich call the service method.

$scope.search = function(){
if($scope.searchedPerson && $scope.searchedPerson.length > 1){
var data = PersonsService.getByFullname($scope.searchedPerson);
data.then(function(data){
$scope.persons = data.persons;
});
}
};

How can i use the remote caller attribute with a function ?
It can be like ng-change function...

Thanks a lot.

Is "tab" key supposed to select an item?

When typing, and navigating through results with down arrow key, then pressing tab, the selected item does not get selected. Is this the expected behavior? Tab should be a key that selects the value and moves to next field....

after selecting focus does not move to next element

after selecting a value from results list, result is placed in html text element. but then it does not move to next element in line.
I am having issue in moving focus to next element when a result has been selected.

$scope.lastFoundWord... what's it for?

I want to prevent kicking off a new search if there is a keyPressed, but the search term hasn't changed (think, you're just moving the cursor, or doing a CMD + A to select the text). In preparing to do this, I noticed a $scope.lastFoundWord variable, but don't see it being used anywhere. What's it for? Was it intended for something like this?

Get remoteURL from $Scope

I need to get the remoteurl for the object request from the $scope, it is possible?

$digest already in progress error

i get this error $digest already in progress i dont undestand why as no other $disest cycle is running & as soon as results are displayed they disappear

License and minified version?

Any plan to add licence and minified version?

Why create your own input element?

When testing this code i noticed you created a inner input element, with its own model then push the result into selectedObject when your ready.

This works, but means, for example if i wanted to clear the value shown, i would need to understand your naming convention (_value) and then tightly couple my code to this implementation.

Would you consider a patch that refactored so the original model is used, instead of a wrapper model?

Add a 1.0.0 git tag for rails-assets.org

It'd be nice to add a simple '1.0.0' tag to the repository to allow gem generation from rails-assets.org. I can't make a pull-request since git tags are not included in them.

Thanks a lot! :)

Allow nested JSON property access

Hi, first of all kudos for such directive, it's been useful :) Keep up the good work.

I have noticed it's not possible to access JSON nested properties from the response, which I would find really useful. For instance:

<angucomplete id="some-search" placeholder="Search" pause="400" selectedObject="selectedService" localdata="data" minlength="1" searchfields="service.name" titlefield="service.name" inputclass="form-control col-lg-4"/>

where data looks like:

[
  {
    "service": {
      "name": "A"
    },
    "otherStuff": {}
  },
  {
    "service": {
      "name": "B"
    },
    "otherStuff": {}
  }
]

Does it seem reasonable?

Manually set selectedObject

Hi,

if i have an edit form, how do you set selectedObject manually when the screen loads?

Html autocomplete getting in the way of selection

I ran into a problem with google chrome autocomplete which would cover the first (and only in this case) search result. To get around it I modified the template block in angucomplete.js and added autocomplete="off" to get around the default browser behaviour.

Way to clear selection

Wondering if there is a way to clear selection - so on click it would clear the object and text placeholder of the selected item. Thanks!

pressing enter is not working in IE 10/11

on selecting the suggestion from down key and pressing enter the selected value is not populating in input box, however everything is working fine in chrome and Firefox

What happend to the Key Events?

They Key Events have been removed? The source code in the demo is different from the repo. If you look there is no key events on the template. Can you still use the arrows to cycle through the dropdown results?

Disable autocomplete of input

hi
i use angucomplete and i have problem
when i click on input , browser suggested me previews searches ...
these two items (browser item and drop-down item) have conflict...
i add this property autocomplete="off" to input in angucomplete.js and the problem was resolved.

No binding when text isn't selected

Hi,
I noticed that selectedObjects is only updated when you actualy select something from the list but it doesn't update when just type your text and click submit.
Did I miss something or it is meant to be like that ?

Problems with minification

After running my app with angucomplete through a js minifier, it throws this error:

ReferenceError: isNewSearchNeeded is not defined

mouse clicking is not triggering the selection

Mouse click is not trigger the selection like hitting the enter does.

Does anyone have a solution so far, ng-blur fix didn't fix this issue.

Bug Scrollbar

If the autocomplete brings a lot of data, when it creates it some bug happens:

1 - if you try to scroll clicking at the scroll and drag it it doesnt work. As soon as i click in the scroll bar, the div with the data desappears

2 - If you try so use the keyboard arrows to scroll down the data, the scroll bar is not following the arrows. I mean, if you press arrows down key, the selection goes down but not the scroll bar.

ngroute

Tried integrating with ngRoute and kept getting
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.2/$injector/modulerr?p0=sLibrary&p1=Error%3ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.2%2Fangular.min.js%3A17%3A381)

I have no idea why this is caused.
Just adding angucomplete to my modules, cause all errors, removing it will make my app function normally.
var app = angular.module('sLibrary',['ngRoute', 'angularUtils.directives.dirPagination', "angucomplete"]);

any ideas?

SyntaxError: expected expression, got '.'

I unzipped angucomplete and moved all of the files into a sandbox directory to 'play around' with it in hopes of eventually integrating it into a single page application. Unfortunately, I get the error listed in the title: SyntaxError: expected expression, got '.'

I haven't tweaked anything in the code. Is there some configuration that needs to happen in order for the index.html in the example directory to work without this error?

The full error is listed below.

Setting or getting the value of input

I'm Dynamically adding rows to a table by pushing values into an object array and i need to populate an input on the row with the value of the autocomplete. the selectedObject isn't working correctly unless i am doing something wrong

Please, change colors from 6(#ffffff) digits to 3 digits(#fff) format

https://github.com/darylrowland/angucomplete/blob/master/angucomplete.css#L7
https://github.com/darylrowland/angucomplete/blob/master/angucomplete.css#L32
https://github.com/darylrowland/angucomplete/blob/master/angucomplete.css#L53
https://github.com/darylrowland/angucomplete/blob/master/angucomplete.css#L46

initialize textbox value

Is it possible to set the input textbox value. Example... you load a view with data from a service call that populates the view on initial page load and you need to set the value of the lookup textbox initially.

Is this already possible. If so, how?

input cannot trigger search on some mobile browsers

When I type the input in the search box, there is no dropdown showing the message "Searching" or "Result not found". Only until I add a space would would the dropdown box appears.

This issue can be easily reproduced on the demo page http://darylrowland.github.io/angucomplete/ on the following mobile browsers:

chinese input on iPhone Safari
chinese input on iPhone Chrome
any input on Android Firefox