0

I want to display a static suggestions in a search textbox but nothing is displayed. I am following this https://codepen.io/joe-watkins/pen/EagEWv. Here is my code.

HTML code:

 <div>    
    <input type="text" name="questions" id="questionss" class="form-control select2-search search_query" placeholder="what are you looking for ?" ng-model='myquery' typeahead="question for question in questions | filter:$viewValue | limitTo:3" />

    <div class="form-group">
        <button type="button" class="btn btn-primary" ng-click="search()">
          Get an answer ! <i class="fa fa-search"></i>
        </button> 
    </div>

And my controller:

var Questions=["hello","hi","question1","question2","question2"];
$scope.questions=Questions;

1 Answer 1

1

Check if any error in your browser console, as your code is really working.

1.Make sure you have include all the dependence:

<link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

2.Notice ng-app="angularTypeahead" in the html and:

var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);

3.Notice ng-controller="TypeaheadCtrl" and:

myApp.controller("TypeaheadCtrl", function($scope) {...});

4.Full code:

Here is a full code live demo

<html>
    <head>
      <link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
      <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    </head>
    
    <body>
      <div ng-app="angularTypeahead">
        <div class="container-fluid" ng-controller="TypeaheadCtrl">
    
          <label for="states">Search for Answer</label>
          <input type="text" name="questions" id="questionss" class="form-control select2-search search_query" placeholder="what are you looking for ?" ng-model='myquery' typeahead="question for question in questions | filter:$viewValue | limitTo:3">
    
          <div class="form-group">
            <button type="button" class="btn btn-primary" ng-click="search()">
              Get an answer ! <i class="fa fa-search"></i>
            </button>
          </div>
    
    
        </div>
      </div>
      <script type="text/javascript">
        var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);
    
    
        // setup controller and pass data source
        myApp.controller("TypeaheadCtrl", function($scope) {
    
          var Questions = ["hello", "hi", "question1", "question2", "question2"];
          $scope.questions = Questions;
    
        });
      </script>
    </body>
    
    </html>

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

9 Comments

I have only one error related to bootstrap file error of analysing the value of <<top>> and error of analysing the value of <<left>>
So, what does the console say? post it here pls.
I have only this warning with chrome bindHtmlUnsafe is now deprecated. Use ngBindHtml instead and there no error but nothing is displaying and everything is okey should it be because of different version of bootstrap or angularjs. I am using bootstap ui 0.13.2 and angularjs v1.4.3 ? I have no idea why is not working
Why not create a code snippet and post your full codes?@desmanda
I tried bootstap ui 0.13.2 and angularjs v1.4.3 in the full code plunder demo, it works although.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.