Angularjs: не показывать результат поиска в typeahead, когда для введенной строки не найдено совпадений

Я использую тип Angular UI-bootstrap.

у меня есть HTML

<input type="text" 
       ng-init="selectedCrossFormFieldText = selectedCrossFormFieldText || {}" 
       ng-model="selectedCrossFormFieldText[fieldId]" 
       placeholder="Auto-complete data from field of form" 
       empty-typeahead 
       ng-trim="false" 
       typeahead="crossFormField.id as crossFormField for crossFormField in getCrossFormFieldData(fieldId, $viewValue) | filter:$viewValue:optionComparator" 
       typeahead-template-url="views/blocks/cross_form_data_typeahead.html" 
       typeahead-on-select="addCrossFormField(fieldId, $item, $model, $label)" 
       typeahead-loading="loadingCrossFormField[fieldId]"  
       typeahead-min-length="0" class="form-control"  />

и

Скрипт:

.then(function (response) {
    console.log('DataForTypeahead', response);
    return response.data;
});

Когда я печатаю, он показывает соответствующие параметры во всплывающем окне typeahead. Но что я должен сделать, чтобы показать, когда совпадений нет, в том же всплывающем окне «Совпадения не найдены»?


angularjs typeahead angular-ui-bootstrap angular-ui-typeahead
person Vikas G    schedule 16.08.2014    source источник
comment
Вы разобрались с этим? Вы проверили решение, которое я предоставил? Все еще нужна помощь?   -  person apairet    schedule 29.08.2014
comment
Я реализовал то же самое ранее. но, результат не я ожидал. Итак, я иду с предупреждениями.   -  person Vikas G    schedule 29.08.2014

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете проверить размер response.data. Если он равен 0, вставьте элемент в массив:

.then(function (response) {
    console.log('DataForTypeahead', response);
    if (response.data.length === 0) {
        response.data.push({
            label: 'No matches found'
        })
    }
    return response.data;
});

Возможно, вы захотите изменить свой код ввода следующим образом:

typeahead="crossFormField.id as crossFormField.label for crossFormField in getCrossFormFieldData(fieldId, $viewValue) | filter:$viewValue:optionComparator"
person apairet    schedule 17.08.2014
comment
Он показывает вариант, поскольку совпадений не найдено. Что кликабельно и принимается как значение. Я хочу отобразить то же самое, не принимая на нем интерактивную функцию. - person Vikas G; 20.08.2014
comment
Вы можете управлять этим случаем в своем «addCrossFormField» и возвращаться, не выполняя никаких действий. Если вы предоставите plunkr, я могу помочь вам в этом. с уважением - person apairet; 20.08.2014
comment
Это сработало для меня. Мне также пришлось очистить поле ng-model. вы можете проверить этот ответ для расширенного решения, он использует собственный шаблон (typeahead-template-url): stackoverflow.com/questions/22969127/ - person Paolo Sanchi; 07.01.2015