don't highlight the partly match. typeahead example with images
parent
df3ce68fbf
commit
7aa7cbe639
Binary file not shown.
After Width: | Height: | Size: 260 B |
Binary file not shown.
After Width: | Height: | Size: 361 B |
Binary file not shown.
After Width: | Height: | Size: 367 B |
@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" ng-app="typeahead">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
|
||||||
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
|
||||||
|
<script src="../components/angular/angular.js"></script>
|
||||||
|
<script src="../components/angular-bootstrap/ui-bootstrap.js"></script>
|
||||||
|
<script src="../components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
|
||||||
|
<script src="../dist/radians.js"></script>
|
||||||
|
<script>
|
||||||
|
angular.module('typeahead', ['ui.bootstrap', 'radians'])
|
||||||
|
.controller('TypeaheadCtrl', function ($scope) {
|
||||||
|
$scope.selected = undefined
|
||||||
|
$scope.states =
|
||||||
|
[ 'Russia <img src="img/ru.gif">'
|
||||||
|
, 'USA <img src="img/us.gif">'
|
||||||
|
, 'UK <img src="img/gb.gif">'
|
||||||
|
]
|
||||||
|
$scope.noimg = function(str) {
|
||||||
|
return str.replace(/<img[^>]*>/, '')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class='container-fluid' ng-controller="TypeaheadCtrl">
|
||||||
|
<pre>Model: {{ selected | json }}</pre>
|
||||||
|
<div ng-model="selected" typeahead="state for state in states | filter:$viewValue" contenteditable>
|
||||||
|
</div>
|
||||||
|
<!-- <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"> -->
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
Reference in New Issue