元素 UI 自动完成没有结果

Posted 2023-02-22

【中文标题】元素 UI 自动完成没有结果

【英文标题】：Element UI autocomplete no results

【发布时间】：2020-06-15 18:57:21

【问题描述】：

我在我的项目中使用element UI autocomplete component。

当输入没有产生结果时，我想显示 no results 消息。 在其他项目中，我将其作为建议框中的一个选项（不可选择）：

但是，使用 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;

【问题讨论】：

请分享一些代码

也许您可以使用键和标签推送 1 个项目，（无结果），如果已选择，则可以通过键检查是否已选择，如果键来自无结果项目，则可以清除输入，有什么意义？

@BoussadjraBrahim，完成。

@Ata，不，这个想法是用户将无法选择“无结果”选项。

这个codepen.io/boussadjra/pen/ZEGvGNm?editors=0000怎么样

【参考方案1】：

您可以使用v-select 实现此行为。有一个filtering option，因此您可以选择选项或使用自动完成输入它。

有两个属性可以控制“无结果”的情况：no-match-text（过滤没有结果）和no-data-text（选择中没有选项）。

【讨论】：

谢谢。不幸的是，autocomplete 组件似乎不存在这些属性。

我又看了一遍，实际上是these two attributes exist，甚至更多——有一个empty slot——但它们都不适合我:-(