mysearch-gl

作业内容

开发一个autocomplete组件，要求如下：

1、 输入关键字可进行筛选
2、 匹配文字高亮
3、 点击筛选项可补全输入框
4、 组件划分明确
5、 组件、变量、css等命名规范
6、 实现双向绑定
7、 注意css边界
8、 可自行设计预留可配置属性（不强制要求）
9、 样式可自行优化

搜索数据

存放在：my_search/src/data/search.json
[
    {
        "name": "安其拉",
        "id": "a1"
    },
    {
        "name": "安琪",
        "id": "a2"
    },
    {
        "name": "陈仙仙",
        "id": "a3"
    },
    {
        "name": "成小龙",
        "id": "a4"
    },
    {
        "name": "程野",
        "id": "a5"
    },
    {
        "name": "丁小明",
        "id": "d1"
    },
    {
        "name": "丁小龙",
        "id": "a6"
    },
    {
        "name": "丁小野",
        "id": "a7"
    },
    {
        "name": "冯小明",
        "id": "f1"
    },
    {
        "name": "冯小龙",
        "id": "f2"
    },
    {
        "name": "冯小野",
        "id": "a8"
    },
    {
        "name": "⾼小明",
        "id": "g1"
    },
    {
        "name": "⾼小龙",
        "id": "a9"
    },
    {
        "name": "⾼小野",
        "id": "g3"
    },
    {
        "name": "⾼小阳",
        "id": "a10"
    },
    {
        "name": "郭小名",
        "id": "a11"
    },
    {
        "name": "黄小明",
        "id": "a12"
    },
    {
        "name": "黄小龙",
        "id": "a13"
    },
    {
        "name": "黄小野",
        "id": "a14"
    },
    {
        "name": "郝小阳",
        "id": "h4"
    },
    {
        "name": "郝小名",
        "id": "a15"
    },
    {
        "name": "李⼩明",
        "id": "a16"
    },
    {
        "name": "李小龙",
        "id": "a17"
    },
    {
        "name": "李小野",
        "id": "a18"
    },
    {
        "name": "李小阳",
        "id": "a19"
    },
    {
        "name": "李小⼀",
        "id": "a20"
    },
    {
        "name": "李小⼆",
        "id": "a21"
    },
    {
        "name": "李小三",
        "id": "a22"
    },
    {
        "name": "李小四",
        "id": "a23"
    },
    {
        "name": "李⼩五",
        "id": "l9"
    },
    {
        "name": "李华尔",
        "id": "a24"
    }
]

两个路由组件和5个普通子组件，将搜索组件细化

Home.vue  根路由组件  有两个子路由组件MySearchLogo.vue、HomeSearchBar.vue。通过在input框输入内容按会车键或者点击按钮，跳转到Search.vue路由组件，并将输入内容通过params传参过来。my_search/src/common/Util.js封装公共的编程式路由函数

Search.vue路由组件包含两个子组件SearchResultToolBar.vue、SearchResultItem.vue。SearchResultItem组件封装查询出来的每一个item项，SearchResultToolBar又包含子组件RoundSearchBar.vue