Angular js autocomplete search with link
Question
I am trying to implement auto complete search with link(after selecting it should jump to particular page). only i need to hide the data appearing below search box, it should only display when user start type like search functionality works.
there are tow screen shot below, 1st one is what i have done where data is by default populated, so i want this to be hidden and when i type the it should display like screen2
<!DOCTYPE html>
<html>
<head>
<title>Angular JS</title>
<style>
ul,li{margin:0; padding:0;}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="movieCtrl">
<input type="text" ng-model="film">
<ul>
<li ng-repeat="x in movies | filter:film | orderBy:'film'" style="list-style-type:none;"><a href="{{ x.param }}">{{ x.film | uppercase }}</a></li>
</ul>
</div>
<script src="Scripts/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('movieCtrl', function($scope, $http) {
$http.get("tmp.php")
.success(function(response) {$scope.movies = response.movie;});
});
</script>
</body>
</html>
2 answers
solution1
1 ACCPTED 2015-08-04 08:01:36
Add a condition to your list to only be visible if the filter is not empty:
<ul ng-show="film">
<li ng-repeat="x in movies | filter:film | orderBy:'film'" style="list-style-type:none;"><a href="{{ x.param }}">{{ x.film | uppercase }}</a></li>
</ul>
solution2
0 2015-08-04 08:10:40
You add a variable (initially false) and hide your list based on that. Then when you change your input change the variable to true. here is what you can do:
<input type="text" ng-model="film" ng-init="show=0" ng-change="show=1">
and
<ul ng-show="show=1">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.