From 49f5997934e801c6da8570c785ab2424a362eebd Mon Sep 17 00:00:00 2001
From: castleiMac <castle@tansuyun.cn>
Date: Sun, 3 Apr 2022 17:29:02 +0800
Subject: [PATCH 1/6] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20select=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=94=AF=E6=8C=81=E5=85=B3=E9=94=AE=E8=AF=8D=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/select.md | 18 ++++++------
 src/component/select/index.vue          | 38 +++++++++++++++++--------
 src/component/selectOption/index.vue    | 11 +++----
 3 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/example/docs/zh-CN/components/select.md b/example/docs/zh-CN/components/select.md
index 0ff61116..6319b36b 100644
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@@ -4,7 +4,7 @@
 ::: title 基本介绍
 :::
 
-::: describe 用于代替原生的选择器，或者需要一个更优雅的多选器时。
+::: describe 用于代替原生的选择器，或者需要一个更优雅的多选器时。支持关键词查询
 :::
 
 ::: title 基础使用
@@ -40,10 +40,10 @@ export default {
 ::: demo
 
 <template>
-  <lay-button @click="change1">切换-当前值 : {{value}}</lay-button>
+  <lay-button @click="change1">切换-当前值 : {{value2}}</lay-button>
   <br/>
   <br/>
-  <lay-select v-model="value">
+  <lay-select v-model="value2">
     <lay-select-option value="1" label="学习"></lay-select-option>
     <lay-select-option value="2" label="编码"></lay-select-option>
     <lay-select-option value="3" label="运动"></lay-select-option>
@@ -55,13 +55,13 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-    const value = ref(null);
+    const value2 = ref(null);
     var i = 1;
     function change1(){
-      value.value=i++%3+1
+      value2.value=i++%3+1
     }
     return {
-      value,
+      value2,
       change1
     }
   }
@@ -106,7 +106,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-select v-model="selected">
+  <lay-select v-model="selected2">
     <lay-select-option value="1" label="学习"></lay-select-option>
     <lay-select-option value="3" label="运动"></lay-select-option>
     <lay-select-option value="1" label="学习"></lay-select-option>
@@ -132,10 +132,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const selected = ref('1')
+    const selected2 = ref('1')
 
     return {
-      selected
+      selected2
     }
   }
 }
diff --git a/src/component/select/index.vue b/src/component/select/index.vue
index 2d80c9ba..a80791a2 100644
--- a/src/component/select/index.vue
+++ b/src/component/select/index.vue
@@ -61,8 +61,8 @@ const selectItem = ref<SelectItem>({
   value: !props.multiple
     ? props.modelValue
     : props.modelValue
-    ? ([] as any[]).concat(props.modelValue)
-    : [],
+      ? ([] as any[]).concat(props.modelValue)
+      : [],
   label: props.multiple ? [] : null,
   multiple: props.multiple,
 } as SelectItem);
@@ -96,6 +96,22 @@ watch(props, () => {
 
 // 禁止操作子项
 const disabledItemMap: { [key: string | number]: boolean } = {};
+const txt = ref("")
+const input = ref(false)
+const value = computed({
+  set(v: any) {
+    txt.value = v;
+  },
+  get() {
+    if (input.value) {
+      return txt.value;
+    }
+    // return txt.value;
+    return !selectItem.value.multiple && selectItem.value.value !== null
+      ? selectItem.value.label
+      : null
+  }
+})
 const selectItemHandle = function (
   _selectItem: SelectItem,
   isChecked?: boolean
@@ -103,6 +119,7 @@ const selectItemHandle = function (
   if (!props.multiple) {
     openState.value = false;
   }
+  txt.value = ""
   disabledItemMap[_selectItem.value as string | number] =
     _selectItem.disabled as boolean;
   if (typeof isChecked !== "boolean") {
@@ -144,6 +161,7 @@ const selectItemPush = function (p: SelectItem) {
 provide("selectItemHandle", selectItemHandle);
 provide("selectItemPush", selectItemPush);
 provide("selectItem", selectItem);
+provide("keyword", txt)
 </script>
 
 <template>
@@ -157,18 +175,15 @@ provide("selectItem", selectItem);
         type="text"
         :placeholder="
           selectItem.value !== null &&
-          Array.isArray(selectItem.value) &&
-          selectItem.value.length > 0
+            Array.isArray(selectItem.value) &&
+            selectItem.value.length > 0
             ? ''
             : emptyMessage ?? placeholder
         "
         :disabled="disabled"
-        readonly
-        :value="
-          !selectItem.multiple && selectItem.value !== null
-            ? selectItem.label
-            : null
-        "
+        v-model="value"
+        @input="input = true"
+        @blur="input = false"
         :name="name"
         :class="[
           'layui-input',
@@ -204,8 +219,7 @@ provide("selectItem", selectItem);
                       : null,
                   })
                 "
-              >
-              </i>
+              ></i>
             </lay-badge>
           </template>
         </div>
diff --git a/src/component/selectOption/index.vue b/src/component/selectOption/index.vue
index 9536a260..75cbcdad 100644
--- a/src/component/selectOption/index.vue
+++ b/src/component/selectOption/index.vue
@@ -22,6 +22,7 @@ const props = withDefaults(defineProps<LaySelectOptionProps>(), {
 const selectItemHandle = inject("selectItemHandle") as SelectItemHandle;
 const selectItem = inject("selectItem") as Ref<SelectItem>;
 const selectItemPush = inject("selectItemPush") as Ref<SelectItemPush>;
+const keyword = inject('keyword') as Ref<string>
 
 const selectHandle = function () {
   !props.disabled && callSelectItemHandle(!selected.value);
@@ -45,7 +46,7 @@ const selected = computed({
     }
     return selectItem.value.value === props.value;
   },
-  set(val) {},
+  set(val) { },
 });
 const callSelectItemPush = function () {
   let item = {
@@ -64,17 +65,13 @@ onMounted(() => {
 
 <template>
   <dd
+    v-show="keyword ? props.label.includes(keyword) : true"
     :value="value"
     :class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
     @click="selectHandle"
   >
     <template v-if="selectItem.multiple">
-      <lay-checkbox
-        skin="primary"
-        v-model="selected"
-        @change="selectHandle"
-        label=""
-      />
+      <lay-checkbox skin="primary" v-model="selected" @change="selectHandle" label />
     </template>
     <slot>{{ label }}</slot>
   </dd>

From 1cdfa5d11231147e62d9a2b4677f2cf9f72f9c29 Mon Sep 17 00:00:00 2001
From: castleiMac <castle@tansuyun.cn>
Date: Sun, 3 Apr 2022 17:33:20 +0800
Subject: [PATCH 2/6] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20select=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=96=B0=E5=A2=9Esearch=E4=BA=8B=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E7=94=A8=E4=BA=8E=E8=A7=A6=E5=8F=91=E8=BF=9C=E7=A8=8B=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=88=96=E8=87=AA=E5=AE=9A=E4=B9=89=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/select.md | 31 +++++++++++++++++++++++++
 src/component/select/index.vue          |  3 ++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/example/docs/zh-CN/components/select.md b/example/docs/zh-CN/components/select.md
index 6319b36b..637e7451 100644
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@@ -100,6 +100,37 @@ export default {
 
 :::
 
+::: title 关键词变化事件，可作为远程搜索处理算法
+:::
+
+::: demo
+
+<template>
+  <lay-select @search="search" v-model="selected">
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="2" label="编码" disabled></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+  </lay-select>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const selected = ref('1');
+    function search(txt){
+      console.log('关键词:',txt)
+    }
+    return {
+      selected,search
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 海量数据 
 :::
 
diff --git a/src/component/select/index.vue b/src/component/select/index.vue
index a80791a2..57d2cf2b 100644
--- a/src/component/select/index.vue
+++ b/src/component/select/index.vue
@@ -56,7 +56,7 @@ const open = function () {
   openState.value = !openState.value;
 };
 
-const emit = defineEmits(["update:modelValue", "change"]);
+const emit = defineEmits(["update:modelValue", "change", 'search']);
 const selectItem = ref<SelectItem>({
   value: !props.multiple
     ? props.modelValue
@@ -101,6 +101,7 @@ const input = ref(false)
 const value = computed({
   set(v: any) {
     txt.value = v;
+    emit('search', v)
   },
   get() {
     if (input.value) {

From 18ee8db0793effb525828c4e3b0efb7bad34235c Mon Sep 17 00:00:00 2001
From: castleiMac <castle@tansuyun.cn>
Date: Sun, 3 Apr 2022 17:44:55 +0800
Subject: [PATCH 3/6] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20selectOption=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BC=A0=E5=85=A5keyword=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E7=94=A8=E4=BA=8E=E8=87=AA=E5=AE=9A=E4=B9=89=E5=85=B3=E9=94=AE?=
 =?UTF-8?q?=E8=AF=8D=E6=9F=A5=E8=AF=A2=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/select.md | 30 +++++++++++++++++++++++++
 src/component/selectOption/index.vue    | 12 +++++++---
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/example/docs/zh-CN/components/select.md b/example/docs/zh-CN/components/select.md
index 637e7451..e172f67d 100644
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@@ -131,6 +131,34 @@ export default {
 
 :::
 
+::: title 选择项自定义搜索内容，可以在keyword属性中传入拼音用于支持拼音搜索
+:::
+
+::: demo
+
+<template>
+  <lay-select v-model="selected">
+    <lay-select-option value="1" label="学习" keyword="学习xuexi"></lay-select-option>
+    <lay-select-option value="2" label="编码" disabled></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+  </lay-select>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const selected = ref('1');
+    return {
+      selected
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 海量数据 
 :::
 
@@ -236,6 +264,7 @@ export default {
 | 属性    | 描述       |     接收值      |
 | ------ | ---------- | --------------- |
 | change | 切换事件    | value           |
+| search | 关键词变化事件    | 用户输入的关键词 string           |
 
 :::
 
@@ -251,6 +280,7 @@ export default {
 | ------------ | --------------------- | ------------------------- | -------------- | -------- |
 | label        | 标签值(`必填`)         | `string`                  |        -       |    -    |
 | value        | 值                    | `string` / `number`       |        -       |    -    |
+| keyword        | 用于匹配关键词的数据，传入文本+拼音可以支持拼音搜索   | `string`        |        -       |    -    |
 | disabled     | 是否禁用              | `boolean`                  | `true` `false` | `false` |
 
 :::
diff --git a/src/component/selectOption/index.vue b/src/component/selectOption/index.vue
index 75cbcdad..c930faf8 100644
--- a/src/component/selectOption/index.vue
+++ b/src/component/selectOption/index.vue
@@ -7,16 +7,19 @@ export default {
 <script setup lang="ts">
 import LayCheckbox from "../checkbox";
 import { SelectItem, SelectItemHandle, SelectItemPush } from "../../types";
-import { computed, inject, onMounted, Ref } from "vue";
+import { computed, inject, onMounted, Ref, ref } from "vue";
 
 export interface LaySelectOptionProps {
   value: string | null | undefined;
-  label?: string;
+  label: string;
+  keyword?: string;
   disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<LaySelectOptionProps>(), {
   disabled: false,
+  keyword: "",
+  label: ""
 });
 
 const selectItemHandle = inject("selectItemHandle") as SelectItemHandle;
@@ -57,15 +60,18 @@ const callSelectItemPush = function () {
   // @ts-ignore
   selectItemPush(item);
 };
+const search = ref("")
 onMounted(() => {
+  search.value = props.keyword || props.label
   callSelectItemPush();
   selected.value && callSelectItemHandle();
+
 });
 </script>
 
 <template>
   <dd
-    v-show="keyword ? props.label.includes(keyword) : true"
+    v-show="keyword ? search.includes(keyword) : true"
     :value="value"
     :class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
     @click="selectHandle"

From 8b4d0abd3c2d0e1e8e10a6398fca5cc30ee6965f Mon Sep 17 00:00:00 2001
From: castleiMac <castle@tansuyun.cn>
Date: Sun, 3 Apr 2022 17:48:09 +0800
Subject: [PATCH 4/6] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20select=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=94=AF=E6=8C=81=E4=BC=A0=E5=85=A5items=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E7=94=A8=E4=BA=8E=E6=B8=B2=E6=9F=93=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/select.md | 31 +++++++++++++++++++++++++
 src/component/select/index.vue          | 10 ++++++++
 src/component/selectOption/index.vue    |  2 +-
 3 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/example/docs/zh-CN/components/select.md b/example/docs/zh-CN/components/select.md
index e172f67d..084a1640 100644
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@@ -157,6 +157,37 @@ export default {
 }
 </script>
 
+:::
+
+::: title 传入items属性进行选项渲染
+:::
+
+::: demo
+
+<template>
+  <lay-select v-model="selected" :items="items">
+  </lay-select>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const selected = ref('1');
+    const items=ref([
+      {label:'选项1',value:1,keyword:'选项xuanxiang1'},
+      {label:'选项2',value:2,keyword:'选项xuanxiang2'},
+      {label:'选项3',value:3,keyword:'选项xuanxiang3'},
+    ])
+    return {
+      selected,items
+    }
+  }
+}
+</script>
+
+
 :::
 
 ::: title 海量数据 
diff --git a/src/component/select/index.vue b/src/component/select/index.vue
index 57d2cf2b..a59a2dac 100644
--- a/src/component/select/index.vue
+++ b/src/component/select/index.vue
@@ -29,6 +29,7 @@ export interface LaySelectProps {
   showEmpty?: boolean;
   emptyMessage?: string;
   multiple?: boolean;
+  items?: { label: string, value: string | number | [] | null, key: string }[]
 }
 
 const selectRef = ref<null | HTMLElement>(null);
@@ -232,6 +233,15 @@ provide("keyword", txt)
       <template v-if="!multiple && showEmpty">
         <lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
       </template>
+      <template v-if="props.items">
+        <lay-select-option
+          v-for="(v, k) in props.items"
+          :key="k"
+          :value="v.value"
+          :label="v.label"
+          :keyword="v.keyword"
+        ></lay-select-option>
+      </template>
       <slot></slot>
     </dl>
   </div>
diff --git a/src/component/selectOption/index.vue b/src/component/selectOption/index.vue
index c930faf8..d329853e 100644
--- a/src/component/selectOption/index.vue
+++ b/src/component/selectOption/index.vue
@@ -10,7 +10,7 @@ import { SelectItem, SelectItemHandle, SelectItemPush } from "../../types";
 import { computed, inject, onMounted, Ref, ref } from "vue";
 
 export interface LaySelectOptionProps {
-  value: string | null | undefined;
+  value: string | null | undefined | number;
   label: string;
   keyword?: string;
   disabled?: boolean;

From 0be015e449d59dbffe3b28657e899afe2cffee92 Mon Sep 17 00:00:00 2001
From: castleiMac <castle@tansuyun.cn>
Date: Sun, 3 Apr 2022 17:49:08 +0800
Subject: [PATCH 5/6] =?UTF-8?q?[=E4=BF=AE=E6=AD=A3]=20select=E7=9A=84?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E9=A1=B9items=E5=B1=9E=E6=80=A7=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81disabled=E7=A6=81=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/select.md | 2 +-
 src/component/select/index.vue          | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/example/docs/zh-CN/components/select.md b/example/docs/zh-CN/components/select.md
index 084a1640..6433675f 100644
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@@ -178,7 +178,7 @@ export default {
     const items=ref([
       {label:'选项1',value:1,keyword:'选项xuanxiang1'},
       {label:'选项2',value:2,keyword:'选项xuanxiang2'},
-      {label:'选项3',value:3,keyword:'选项xuanxiang3'},
+      {label:'选项3',value:3,keyword:'选项xuanxiang3',disabled:true},
     ])
     return {
       selected,items
diff --git a/src/component/select/index.vue b/src/component/select/index.vue
index a59a2dac..680fda97 100644
--- a/src/component/select/index.vue
+++ b/src/component/select/index.vue
@@ -239,6 +239,7 @@ provide("keyword", txt)
           :key="k"
           :value="v.value"
           :label="v.label"
+          :disabled="v.disabled"
           :keyword="v.keyword"
         ></lay-select-option>
       </template>

From 262fb12e288a328f18129c427ffad014268e2b82 Mon Sep 17 00:00:00 2001
From: castleiMac <castle@tansuyun.cn>
Date: Sun, 3 Apr 2022 19:29:49 +0800
Subject: [PATCH 6/6] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20select=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=94=AF=E6=8C=81create?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/select.md | 40 +++++++++++++++++++++++++
 src/component/select/index.vue          | 12 ++++++--
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/example/docs/zh-CN/components/select.md b/example/docs/zh-CN/components/select.md
index 6433675f..5e2ac081 100644
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@@ -188,6 +188,44 @@ export default {
 </script>
 
 
+:::
+
+::: title 传入create属性和接收create事件用于开启创建子项功能
+:::
+
+::: demo
+
+<template>
+  <lay-select v-model="selected" :items="items" :create="true"  @create="createEvent">
+  </lay-select>
+  当前元素: {{items.map(o=>o.label).join()}}
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const selected = ref('1');
+    const items=ref([
+      {label:'选项1',value:'1',keyword:'选项xuanxiang1'},
+      {label:'选项2',value:2,keyword:'选项xuanxiang2'},
+      {label:'选项3',value:3,keyword:'选项xuanxiang3',disabled:true},
+    ]);
+    function createEvent(v){
+      items.value.push({
+        label:v,
+        value:items.value.length
+      })
+    }
+    return {
+      selected,items,createEvent
+    }
+  }
+}
+</script>
+
+
 :::
 
 ::: title 海量数据 
@@ -283,6 +321,7 @@ export default {
 | disabled     | 是否禁用              | `boolean`                  | `true` `false` | `false` |
 | showEmpty    | 是否增加空提示选项     | `boolean`                  | `true` `false` | `true` |
 | multiple     | 是否为多选            | `boolean`                  | `true` `false` | `false` |
+| create       | 是否允许创建            | `boolean`                  | `true` `false` | `false` |
 
 
 :::
@@ -296,6 +335,7 @@ export default {
 | ------ | ---------- | --------------- |
 | change | 切换事件    | value           |
 | search | 关键词变化事件    | 用户输入的关键词 string           |
+| create | 允许创建情况下的创建回调事件    | 用户输入的关键词 string           |
 
 :::
 
diff --git a/src/component/select/index.vue b/src/component/select/index.vue
index 680fda97..f5472caa 100644
--- a/src/component/select/index.vue
+++ b/src/component/select/index.vue
@@ -29,6 +29,7 @@ export interface LaySelectProps {
   showEmpty?: boolean;
   emptyMessage?: string;
   multiple?: boolean;
+  create?: boolean;
   items?: { label: string, value: string | number | [] | null, key: string }[]
 }
 
@@ -44,6 +45,7 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
   disabled: false,
   showEmpty: true,
   multiple: false,
+  create: false
 });
 
 const openState = ref(false);
@@ -55,9 +57,10 @@ const open = function () {
     return;
   }
   openState.value = !openState.value;
+  console.log(props.create)
 };
 
-const emit = defineEmits(["update:modelValue", "change", 'search']);
+const emit = defineEmits(["update:modelValue", "change", 'search', 'create']);
 const selectItem = ref<SelectItem>({
   value: !props.multiple
     ? props.modelValue
@@ -114,7 +117,7 @@ const value = computed({
       : null
   }
 })
-const selectItemHandle = function (
+const selectItemHandle = async function (
   _selectItem: SelectItem,
   isChecked?: boolean
 ) {
@@ -230,9 +233,12 @@ provide("keyword", txt)
 
     <!-- 下拉内容 -->
     <dl class="layui-anim layui-anim-upbit">
-      <template v-if="!multiple && showEmpty">
+      <template v-if="!multiple && showEmpty && !props.create">
         <lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
       </template>
+      <template v-if="props.create">
+        <dd @click="emit('create', txt)">{{ txt }}</dd>
+      </template>
       <template v-if="props.items">
         <lay-select-option
           v-for="(v, k) in props.items"