I use in my project element UI autocomplete component.
When the input raises no result, I want to show a no results message.
In other projects I had it as an option in the suggest box (which is NOT selectable):
However, with element-ui autocomplete, after the searching icon disappears, the drop-down disappears as well:
With this component I do not manage to do so. Any idea?
My code looks like this:
Template:
<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>
Script:
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 code: (Laravel)
public function getCities($query)
{
$res = DB::connection('mainDb')
->table('offices')
->where('city', 'like', $query . '%')
->select('city AS value')
->distinct()
->get();
return $res;
}

