Search

Search

搜索组件。

属性

• 属性说明：

方法

• 方法说明：

使用方法

• 代码示例：

  // 在script标签中按需引入
  import { Pinyin } from '@jecloud/ui';
  export default {
    components: { Pinyin },
    setup() {
        const value = ref('');
        const data = [
            { id: 1, text: '节点1' },
            { id: 2, text: '节点2' },
            { id: 3, text: '节点3' },
            { id: 4, text: '节点4' },
            { id: 5, text: '节点5' },
        ];
  
         // 选中属性节点
          const onSelect = (val, option) => {
            value.value = val;
            console.log(option);
          };
          // 节点过滤函数
          const filter = (item, keyword) => {
            const text = item.text?.toLocaleLowerCase() ?? '';
            const pinyinText = pinyin(text, 'pinyin');
            if (text.includes(keyword) || pinyinText.includes(keyword)) {
              return true;
            }
            return false;
          };
          // 查询关键字
          const onSearch = (keyword, resolve) => {
            const items = [];
            keyword = keyword.toLocaleLowerCase();
            data.forEach((item) => {
              if (filter(item, keyword)) {
                items.push({
                  id: item.id,
                  text: item.text,
                });
              }
            });
            resolve(items);
          };
  
          return { value, onSearch, onSelect };
        },
  };
  // 在vue的template标签中
  <Search
      v-model:value="value"
      labelField="text"
      subLabelField="id"
      @search="onSearch"
      @select="onSelect"
      placeholder="输入“节点”进行搜索"
      style="width: 100%"
  />

• 事件脚本示例：

  const { Search } = JE.useUi();
  const { h, ref } = JE.useVue();
  const { pinyin } = JE.useUtils();
  const searchValue = ref('');
  // 节点过滤函数
  const filter = (item, keyword) => {
      const text = item.text?.toLocaleLowerCase() ?? '';
      const pinyinText = pinyin(text, 'pinyin');
      if (text.includes(keyword) || pinyinText.includes(keyword)) {
        return true;
      }
      return false;
  };
  const data = [
      { id: 1, text: '节点1' },
      { id: 2, text: '节点2' },
      { id: 3, text: '节点3' },
      { id: 4, text: '节点4' },
      { id: 5, text: '节点5' },
  ];
  return h(Search, {
      labelField: 'text',
      subLabelField: 'id',
      value: searchValue.value,
      onSearch: function (keyword, resolve) {
        const items = [];
        keyword = keyword.toLocaleLowerCase();
        data.forEach((item) => {
          if (filter(item, keyword)) {
            items.push({
              id: item.id,
              text: item.text,
            });
          }
        });
        resolve(items);
   },
  });