Я использую в своем проекте элемент автозаполнения пользовательского интерфейса компонента .
Когда на входе нет результатов, я хочу показать сообщение без результатов .
В других проектах у меня было это как опция в окне подсказки (которое НЕ выбирается):
Однако, с автозаполнением element-ui, после исчезает значок поиска, исчезает и раскрывающийся список:
С этим компонентом мне не удается это сделать. Есть идеи?
Мой код выглядит так:
Шаблон:
<el-form ref="addressForm" :inline="true" :model="formData">
<el-form-item prop="city">
<el-autocomplete
class="inline-input"
v-model="formData.cityInput"
:fetch-suggestions="getCities"
placeholder="City"
:trigger-on-focus="false"
:clearable="true"
@select="handleSelectCity"
@clear="clearCity"
size="small"
></el-autocomplete>
</el-form-item>
:
:
<el-form-item>
<el-button type="primary" @click="onSubmit" size="small">
Search
</el-button>
</el-form-item>
</el-form>
Сценарий:
export default {
data() {
return {
formData: {
cityInput: "",
city: "",
:
:
},
}
},
methods: {
getCities(query, callback) {
this.clearCity();
// Ajax call to obtain results for autocomplete
axios.get(
"/cities", {
query: query
})
.then(
response => {
callback(response.data);
}
);
},
handleSelectCity(item) {
this.formData.city = item.value;
},
clearCity() {
this.formData.city = "";
},
:
:
:
}
};
PHP код: (Laravel)
public function getCities($query)
{
$res = DB::connection('mainDb')
->table('offices')
->where('city', 'like', $query . '%')
->select('city AS value')
->distinct()
->get();
return $res;
}