Вот JS для простого автозаполнения Angular:
var app = angular.module('typeAhead', []);
app.controller('TestCtrl', function($scope) {
$scope.things = [
{ name: "foo", description: "not just any foo" },
{ name: "bar", description: "a bar, in so many words" },
{ name: "gronk", description: "gronk was a wildcat before he was a patriot" },
{ name: "fleebles", description: "i dunno. fleebles just rolls off the tongue for me" },
{ name: "sepulveda", description: "i think 'sepulveda' is a real word with a real meaning" },
{ name: "crinkle", description: "crinkle, since 2008" }
];
$scope.selected;
$scope.choose = function(thing) {
$scope.selected = thing;
$scope.searchForm.$setPristine();
}
});
... и html:
<body ng-app="typeAhead" ng-controller="TestCtrl">
<form name="searchForm" novalidate>
<input type="text" ng-model="selected">
<span>{{selected.description}}</span>
</form>
<div ng-if="selected">
<div class="result" ng-repeat="thing in filtered = (things | filter:selected)" ng-click="choose(thing)">{{thing.name}}</div>
</div>
</body>
Сначала кажется, что это работает, с двумя проблемами при наборе текста:
- введите несколько букв, затем очистите все, и в результате появится полный список. Ожидаемое поведение не дало бы результатов, если бы не было текста поиска
- поиск опрашивает и вещь.имя, и вещь.описание, что хорошо, но мне нужно, чтобы совпадения имен были приоритетными, а не совпадения описания
Есть также 3 новые задачи после выбора:
- Предложения не исчезают
- Текстовое поле показывает
[Object object] - Модель взорвана, поэтому последующие поиски не работают
Если я изменю ввод ng-model на selected.name, выбор исправит отображение текста, но тогда он будет искать только по имени.
Вот пример: http://plnkr.co/edit/BcyfGnTGW6NFpf9jm7Mq?p=preview
Для меня очевидно, что есть много энергии, доступной через фильтр, но, насколько я могу судить, они сожгли документацию и убили беднягу, который ее написал, поэтому я понятия не имею, какие варианты и подходы доступны, либо стратегический или синтаксический.
Пожалуйста, не предлагайте мне использовать директиву Typeahead UI-Bootstrap; это здорово, но мой пример здесь значительно упрощен по сравнению с потребностями моего реального проекта, а UI-Bootstrap не учитывает некоторые из моих пользовательских потребностей.
