You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
2.0 KiB
HTML
51 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" ng-app="typeahead3">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link href="https://rawgithub.com/jozefizso/bower-bootstrap-css/2.3.2/css/bootstrap.css" rel="stylesheet">
|
|
<script src="https://rawgithub.com/components/jquery/2.0.2/jquery.js"></script>
|
|
<script src="https://rawgithub.com/johannestroeger/bower-angular-unstable/1.1.5/angular.js"></script>
|
|
<script src="https://rawgithub.com/angular-ui/bootstrap-bower/0.4.0/ui-bootstrap.js"></script>
|
|
<script src="https://rawgithub.com/angular-ui/bootstrap-bower/0.4.0/ui-bootstrap-tpls.js"></script>
|
|
<script src="https://rawgithub.com/akatov/angular-contenteditable/master/angular-contenteditable.js"></script>
|
|
<script>
|
|
angular.module('typeahead3', ['ui.bootstrap', 'contenteditable'])
|
|
.controller('Typeahead3Ctrl', function($scope, $http, limitToFilter, ignoreImgFilter) {
|
|
$scope.selected = ""
|
|
$scope.states = function(query){
|
|
return $http.get("states.json").then(function(response){
|
|
console.log("response", response)
|
|
return limitToFilter(ignoreImgFilter(response.data, query), 2)
|
|
})
|
|
}
|
|
})
|
|
.filter('ignoreImg', function(){
|
|
var escapeRegexp = function(str) {
|
|
return str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1")
|
|
}
|
|
var noImg = function (str) {
|
|
return str.replace(/<img[^>]*>/g, '')
|
|
}
|
|
return function(items, query) {
|
|
var ret = []
|
|
items.forEach(function(item){
|
|
if (noImg(item).match(new RegExp(escapeRegexp(noImg(query)), 'gi')))
|
|
ret.push(item)
|
|
})
|
|
return ret
|
|
}
|
|
})
|
|
// override typeahead's Highlight filter - don't highlight anything
|
|
.filter('typeaheadHighlight', function() {
|
|
return function(matchItem, query){return matchItem}
|
|
})
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class='container-fluid' ng-controller="Typeahead3Ctrl">
|
|
<pre>Model: {{ selected | json }}</pre>
|
|
<div ng-model="selected" typeahead="state for state in states($viewValue)" contenteditable="true" style="width:400px; height: 20px;"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|