1はじめに。
テーブルリストに対応する検索要件に直面した場合、通常は、あいまい検索のテキストボックスを入力するか、セレクターを選択して正確な検索のために特定の項目を選択するだけで済みます。もちろん、この記事ではそのような単純な知識のポイントについては説明しませんが、入力ボックスと選択セレクターの間の「組み合わせ」を使用するスキルを示します。結局のところ、PMによって、ユーザーが漠然と完全に一致するオプションを入力および検索できる機能を実装できるようになる日があるかもしれません。
2.一般的なスキーム。
ここでは、2つの一般的な単純な実装方法、つまり一般的な要件への応答方法について簡単に説明します。単純すぎるので、ここに簡単な紹介があります。エレメント公式サイト
- 入力入力ボックスを使用します(この記事では、要素コンポーネントライブラリのel-inputを例として取り上げます)。
- 説明:
フロントエンドは、ユーザーがコンテンツを入力するためのテキスト入力ボックスを提供するだけでよく、[検索]をクリックし、対応するパラメーター(テキストボックスの値)をバックエンドインターフェイスに送信して、対応する検索を完了します。
- 効果:
- 選択セレクターを使用します(この記事では、要素コンポーネントライブラリのel-selectを例として取り上げます)。
- 説明:
フロントエンドは選択セレクターを提供し、それにフィルター可能な属性を設定して、入力マッチングモードを有効にできるようにします。ユーザーがオプションを選択して検索をクリックした後、対応するパラメーター(選択されたオプション値または対応するIDなど) 。)バックエンドインターフェースに送信されます。対応する検索を完了することができます。
- 効果:
3.包括的なプログラム。
ここでのスペースは、ユーザーがファジー入力を入力し、完全に一致するオプションを検索できるようにする機能の実現に焦点を当てています。(上記の2の方法2と比較して----選択セレクターを使用すると、一致しない値を入力ボックスに入力し、モジュールの取得を実行するために入力ボックスに保持できます(保持が重要です) )。
- htmlタグのネイティブ実装。
- 説明:
入力ネイティブタグをデータリストおよびオプションタグと組み合わせて使用します。
- コアコード:
<div class="about">
<input
id="appName"
type="text"
list="appNamelist"
style="padding: 0.5em; border-radius: 10px"
/>
<datalist id="appNamelist">
<option>黄金糕</option>
<option>双皮奶</option>
<option>蚵仔煎</option>
<option>龙须面</option>
<option>北京烤鸭</option>
</datalist>
<el-button type="primary" style="margin-left: 15px">搜索</el-button>
</div>
复制代码
- 効果画像:
2.選択セレクターを使用し、blurイベントを使用して実装します(この記事では、要素コンポーネントライブラリのel-selectを例として取り上げます)。
- 説明:
上記の方法2に基づいてblurイベントを直接追加します。2----selectセレクターを使用します。イベント処理ロジックは、ターゲットの値をselectセレクターのバインディング値に割り当てることです。
- コアコード:
<template>
<div class="about">
<el-select
v-model="value"
placeholder="请选择检索内容"
style="width: 200px; margin-top: 50px"
filterable
clearable
@blur="getCurVal"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-button type="primary" style="margin-left: 15px">搜索</el-button>
</div>
</template>
<script>
export default {
name: "About",
data() {
return {
value: "",
options: [
{
value: "选项1",
label: "黄金糕",
},
{
value: "选项2",
label: "双皮奶",
},
{
value: "选项3",
label: "蚵仔煎",
},
{
value: "选项4",
label: "龙须面",
},
{
value: "选项5",
label: "北京烤鸭",
},
],
};
},
methods: {
getCurVal(val) {
console.log(val);
this.value = val.target.value;
},
},
};
</script>
复制代码
- 効果画像: