1

Можно ли использовать директиву AngularUI Bootstraps typeahead для извлечения предложений только для последнего слова в предложении?Слово по слову typeahead с AngularUI Bootstrap

Например: если пользователь вводит «Красный Ca», предложение должно быть чем-то вроде «Автомобиль, Карусель, Свеча», независимо от того, какое слово было перед «Са»?

Конечно, когда пользователь выбирает «Автомобиль», результатом должен быть «Красный автомобиль». Он не должен заменять весь контент ввода.

ответ

3

Есть 2 вопроса здесь, чтобы сделать его работу:

  1. Фильтр предложений по последнему слову
  2. Держите начало ввода, как пользователь выбирает значение для последнего слова

1) легко решается с помощью пользовательской функции, чтобы отфильтровать предлагаемые значения:

$scope.containsLastWord = function(state, viewValue) { 
    var words = viewValue.split(" "); 
    var currentWord = words[words.length - 1]; 
    return state.substr(0, currentWord.length).toLowerCase() == currentWord.toLowerCase(); 
} 

А в вашем машинописный:

typeahead="name for name in states | filter:$viewValue:containsLastWord" 

2) является более сложным, потому что вы не можете поймать выберите событие, прежде чем он изменяет модель. Так что я должен был держать след модели старого значения, и изменить значение модели после выбора пользователя:

var typeaheadLastValue = ""; 
$scope.$watch('selected', function(newVal, oldVal) { 
    typeaheadLastValue = oldVal || ""; 
}); 

$scope.typeaheadOnSelect = function(item) { 
    var words = typeaheadLastValue.split(" "); 
    words[words.length - 1] = item; 
    $scope.selected = words.join(" "); 
} 

И в вашем машинописный:

typeahead-on-select="typeaheadOnSelect($item)" 

Plunker здесь: http://plnkr.co/edit/hutiNW5s58MfNBap0p1Z?p=preview

PS : Этот код не обрабатывает случай, когда предложения содержат «»

+0

Он отлично работает, но выделение соответствующего текста в предлагаемом списке слов не работает ни для какого другого слова, кроме первое слово на входе. – Ayan

Смежные вопросы