I am currently working on replicating the search suggestion feature found at: where certain words are displayed as you type in the search box.
Here is my HTML setup:
<form ng-controller="SearchCtrl">
<input name="q" ng-model="query" ng-keypress="querySuggest()" type="text">
<div class="search__enhance">
<span class="search__offset" ng-bind="suggestion.query"></span>
<span class="search__suggestion" ng-bind="suggestion.text"></span>
</div>
</form>
Additionally, inside my controller:
myApp.controller('SearchCtrl', function($rootScope, $scope, $state, $location) {
$scope.querySuggest = function () {
var haystack = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Small Talk", "Scheme"];
$scope.suggestion.query = '';
$scope.suggestion.text = '';
}
});
My next step involves displaying the search results within the input element (splitting what has been entered by the user and suggesting alternate query options).
I am currently struggling with the following tasks:
- Displaying the search suggestion (excluding the entered query) in the search__suggestion span element.
- Showcasing the entered query in the search__offset span element (it appears they do not display the value in the input itself...)
- Associating the entered query with the haystack array.
Any thoughts or suggestions on how to tackle these three challenges?