AngularJS bootstrapUI : Typehead multiple select directive

Question

I'm very new to AngularJS and i have some troubles understanding how the select directive work (Official doc).

I used the bootstrap UI example at http://angular-ui.github.io/bootstrap/ (bottom of the page) to create a live search.

Here is my code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app="myApp">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
        <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script>
            angular.module('myApp', ['ui.bootstrap']);
            function searchCtrl($scope, $http) {
                $scope.json = [{"symbol":"AA","name":"Alcoa Inc. "},{"symbol":"AAALF","name":"Aareal Bank AG "},{"symbol":"AAALY","name":"Aareal Bank AG Unsponsored American Depository Receipt (Germany)"},{"symbol":"AAARF","name":"Aluar Aluminio Argentino Sa Alua "},{"symbol":"AABB","name":"Asia Broadband Inc "},{"symbol":"AABGF","name":"Agrana Beteiligungs Ag "},{"symbol":"AABNF","name":"Altin Ag Baar Namen"},{"symbol":"AABVF","name":"Aberdeen International Inc "},{"symbol":"AACAF","name":"AAC Technologies Holdings Inc "},{"symbol":"AACAY","name":"AAC Technologies Holdings Inc Unsponsored ADR (Cayman Islands)"},{"symbol":"AACEY","name":"Asia Cement (China) Holdings Corp. Unsponsored ADR (Cayman Islands)"},{"symbol":"AACMZ","name":"Asia Cement Corp Global Depositary Receipts 144A (Taiwan)"},{"symbol":"AACS","name":"American Commerce Solutions, Inc. "},{"symbol":"AACTF","name":"ACT Aurora CTL Technologies Corp "},{"symbol":"AADG","name":"Asian Dragon Group, Inc. "},{"symbol":"AADR","name":"WCM BNY Mellon Focused Growth ADR ETF"},{"symbol":"AAEEF","name":"Altair Gold, Inc. "},{"symbol":"AAEH","name":"All American Energy Holding, Inc. "},{"symbol":"AAGC","name":"All American Gold Corp. "},{"symbol":"AAGH","name":"Asia Global Holdings Corp. "},{"symbol":"AAGIY","name":"AIA Group, Ltd. Sponsored American Depository Receipt (Hong Kong)"},{"symbol":"AAGLF","name":"Aurora Oil & Gas Ltd "},{"symbol":"AAGLY","name":"Aurora Oil & Gas Ltd Unsponsored ADR (Australia)"},{"symbol":"AAGRY","name":"Astra Agro Lestari TBK PT Unsponsored ADR (Indonesia)"}]
            };


        </script>
    </head>
    <body> 
        <script type="text/ng-template" id="quotes_local.html">
            <a>
                    <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
                </a>
      </script>
        <div class='container' ng-controller="searchCtrl">       
            <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="quote.symbol as quote.name for quote in json | filter:{$: $viewValue} | limitTo:8" typeahead-template-url="quotes_local.html" class="form-control">
       </div>
    </body>
</html>

See in plunker too

Currently, when i start typing, it searches for company name and when i select a company it writes its symbol in the field.

What i would like to do is that it searches in company name and symbol name. In the template it should display : Symbol - Company Name and highlight whenever it needs both on the symbol and the company name.

Chris · Accepted Answer · 2014-03-30 14:56:01Z

2

You just need to add symbol string to the template and typehead
The symbol in the drop down list:

<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>

becomes:

{{ match.model.symbol }} - <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>

and to add the symbol to typehead:

typeahead="quote.symbol as quote.name for quote in json | filter:{$: $viewValue} | limitTo:8"

becomes:

typeahead="quote.symbol + ' - ' + quote.name as quote.name  for quote in json | filter:{$: $viewValue} | limitTo:8"

heres the plunker

edited Mar 30, 2014 at 14:56

answered Mar 30, 2014 at 14:30

Chris

1,05010 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Sasik Over a year ago

@bobbyshark also wants to match on the symbols. You got the symbol - name part correctly but only the name is being matched. Also, could you please edit your answer to show the changes? A link to plunker is nice but sites and pages die and when that happens an answer with just a link becomes completely useless.

Paul Sasik Over a year ago

+1 Nice job. Note: To back up @BobbyShark's comment above I published a plunk with just the changes mentioned in my answer: plnkr.co/edit/xKP9VS And thanks for the edits, btw. There's nothing more annoying than thinking you've found an answer on SO only to be linked to a 404.

Paul Sasik · Accepted Answer · 2014-03-30 18:43:37Z

1

All you need to do is specify a string concatenation of symbol and name separated with a dash in your input's typeahead directive:

typeahead="quote.symbol as quote.symbol + ' - ' + quote.name for quote in json | filter:{$: $viewValue} | limitTo:8" typeahead-template-url="quotes_local.html" class="form-control">
                           |_______________________________|

So, the first section of typehead:

quote.symbol as quote.name for quote in json

becomes:

quote.symbol as quote.symbol + ' - ' + quote.name for quote in json

See the complete code sample here... (Same plunker link as above.)

edited Mar 30, 2014 at 18:43

answered Mar 30, 2014 at 14:33

Paul Sasik

81.9k23 gold badges152 silver badges194 bronze badges

Collectives™ on Stack Overflow

AngularJS bootstrapUI : Typehead multiple select directive

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related