Element UI autocomplete no results

Viewed 4725

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):

enter image description here

However, with element-ui autocomplete, after the searching icon disappears, the drop-down disappears as well:

enter image description here

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;
}
2 Answers

You can achieve this behaviour with v-select. There is a filtering option so you can either select option or type it down with autocomplete.

There are two attributes to control "no-result" case: no-match-text when filtering gave no result and no-data-text when there is no options in select.

I tried el-select and it works good with "no matched data".But its remote-method function isn't smart enough without callback parameter if you want to pass a function to it from outside component. So,I have to try codepen.io/boussadjra/pen/ZEGvGNm, use the blur method to clear no matched data, and it works like the el-select.

Related