angularjs - Angular autocomplete with search filter -

-

how can have autocomplete feature in angular combined search filter?

this code using search filter problem want add autocomplete feature.

js code

angular.module('sortapp', [])      .controller('maincontroller', function($scope) {      $scope.sorttype     = 'country'; // set default sort type      $scope.sortreverse  = false;  // set default sort order      $scope.searchcountry   = '';     // set default search/filter term     $scope.countries = [     { country: 'austria', smallmediumbusiness: '+43-720-880296', enterprise: '0800006482', countryclass:'at'},     { country: 'belgium', smallmediumbusiness: '+32-78480136', enterprise: '080049411', countryclass:'be'},     { country: 'bulgaria', smallmediumbusiness: '+359-24917167', enterprise: '00800-115-1013', countryclass:'bg'},     { country: 'croatia', smallmediumbusiness: '', enterprise: '0800-7534', countryclass:'hr'},     { country: 'czech republic', smallmediumbusiness: '+420-228880035', enterprise: '800-408-884', countryclass:'cz'},     { country: 'denmark', smallmediumbusiness: '+45-89880568', enterprise: '80888039', countryclass:'dk'},     { country: 'estonia', smallmediumbusiness: '+372-8801898', enterprise: '800-0100-199', countryclass:'ee'},     { country: 'finland', smallmediumbusiness: '+358-942597807', enterprise: '0800114334', countryclass:'fi'},     { country: 'france', smallmediumbusiness: '+33176686572', enterprise: '0805636251', countryclass:'fr'},     { country: 'germany', smallmediumbusiness: '+33176686572', enterprise: '08005893734', countryclass:'de'},     { country: 'hungary', smallmediumbusiness: '+36-18088424', enterprise: '0680015552', countryclass:'hu'},     { country: 'iceland', smallmediumbusiness: '', enterprise: '8009078', countryclass:'is'},     { country: 'ireland', smallmediumbusiness: '+33176686572', enterprise: '08005893734', countryclass:'ie'}   ];  });

html

<input class="form-control" id="tags" type="search" ng-model="searchcountry" placeholder="type country search" required="" style="margin-bottom:10px; margin-left: -16px;"/>    <tr ng-repeat="view in countries | orderby:sorttype:sortreverse | filter:searchcountry">                          <td class="{{view.countryclass}}">{{ view.country }}</td>                          <td>{{ view.smallmediumbusiness }}</td>                          <td>{{ view.enterprise }}</td>                    </tr>

thank in advance.

i'd suggest use angular-ui#typeahead.

you need import this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.1/ui-bootstrap-tpls.min.js"></script>

and inject in module:

angular   .module('sortapp', ['nganimate', 'ui.bootstrap'])

see working:

(function() {    angular      .module('sortapp', ['nganimate', 'ui.bootstrap'])      .controller('maincontroller', maincontroller);            maincontroller.$inject = ['$scope'];            function maincontroller($scope) {        $scope.countries = [             {                "country":"austria",              "smallmediumbusiness":"+43-720-880296",              "enterprise":"0800006482",              "countryclass":"at"           },           {                "country":"belgium",              "smallmediumbusiness":"+32-78480136",              "enterprise":"080049411",              "countryclass":"be"           },           {                "country":"bulgaria",              "smallmediumbusiness":"+359-24917167",              "enterprise":"00800-115-1013",              "countryclass":"bg"           },           {                "country":"croatia",              "smallmediumbusiness":"",              "enterprise":"0800-7534",              "countryclass":"hr"           },           {                "country":"czech republic",              "smallmediumbusiness":"+420-228880035",              "enterprise":"800-408-884",              "countryclass":"cz"           },           {                "country":"denmark",              "smallmediumbusiness":"+45-89880568",              "enterprise":"80888039",              "countryclass":"dk"           },           {                "country":"estonia",              "smallmediumbusiness":"+372-8801898",              "enterprise":"800-0100-199",              "countryclass":"ee"           },           {                "country":"finland",              "smallmediumbusiness":"+358-942597807",              "enterprise":"0800114334",              "countryclass":"fi"           },           {                "country":"france",              "smallmediumbusiness":"+33176686572",              "enterprise":"0805636251",              "countryclass":"fr"           },           {                "country":"germany",              "smallmediumbusiness":"+33176686572",              "enterprise":"08005893734",              "countryclass":"de"           },           {                "country":"hungary",              "smallmediumbusiness":"+36-18088424",              "enterprise":"0680015552",              "countryclass":"hu"           },           {                "country":"iceland",              "smallmediumbusiness":"",              "enterprise":"8009078",              "countryclass":"is"           },           {                "country":"ireland",              "smallmediumbusiness":"+33176686572",              "enterprise":"08005893734",              "countryclass":"ie"           }        ];      }  })();
<!doctype html>  <html ng-app="sortapp">    <head>    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.1/ui-bootstrap-tpls.min.js"></script>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  </head>    <body ng-controller="maincontroller">    <div class="col-md-12">      <input type="text" ng-model="selected" uib-typeahead="c.country c in countries | filter:$viewvalue | limitto:8" class="form-control">      <pre ng-bind-template="model: {{selected | json}}"></pre>    </div>  </body>    </html>


Comments

Post a Comment

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

-
i trying work entity inside request method of spring boot application. entity in project , pom.xml has dependencies it. why error message?: org.hibernate.unknownentitytypeexception: unable locate persister: com.ric.bill.model.bs.par package com.ric.web; import java.util.concurrent.atomic.atomiclong; import javax.persistence.entitymanager; import javax.persistence.persistencecontext; import net.sf.ehcache.cachemanager; import net.sf.ehcache.management.cache; import net.sf.ehcache.management.cachestatistics; import org.hibernate.stat.statistics; import org.springframework.beans.factory.annotation.autowired; import org.springframework.boot.autoconfigure.domain.entityscan; import org.springframework.cache.annotation.enablecaching; import org.springframework.transaction.annotation.enabletransactionmanagement; import org.springframework.transaction.annotation.propagation; import org.springframework.transaction.annotation.transactional; import org.springframework.web.bind.annotati
Read more

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

-
i implementing go program uses bufio.scanner , bufio.writer have packaged code follows package main import ( "fmt" "player/command" "strings" ) func main() { //enter code here. read input stdin. print output stdout commands.scanner.scan() { //scan new line , send comand variable check command exist or not input := strings.split(strings.trim(commands.scanner.text(), " "), " ") command := input[0] if command == "" { fmt.printf("$ %s:", commands.pwd) continue } if !commands.commands[command] { commands.throwerror("cannot recognize input.") } else { commands.execute(command, input[1:], nil) } fmt.printf("$ %s:", commands.pwd) } } i using init.go file in main package follows package main import ( "flag" "player/sourc
Read more

c - double free or corruption (fasttop) -

-
this code reads null terminated string file (file containing null terminated strings & should provide index wanted string). error: *** error in `./main': double free or corruption (fasttop): 0x090a4a80 *** aborted code: char *tmp_realloc=null; char *sstring=null; int i=1; /*set file pointer point string*/ fseek(fh,index,seek_set); sstring=(char*)malloc(sizeof(char)); if(sstring == null) return null; tmp_realloc=sstring; while( (*(sstring+i-1)=(char)fgetc((file*)fh)) != 0x0 ) { /*reallocate more memory*/ tmp_realloc=(char*)realloc((char*)sstring,++i); /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strcpy((char*)tmp_realloc,(char*)sstring); free(sstring); sstring=tmp_realloc; } } could tell me pointer causing issue (& reason) ? remove part /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strc
Read more