基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput

ngTagsInput是国外开发者开发的开源Angularjs插件,项目发布在github.com上:https://github.com/mbenford/ngTagsInput
示例地址:http://mbenford.github.io/ngTagsInput/demos

 .field
     label  测试
         tags-input(add-on-space="true",min-length="1",ng-model="tags",
                          ng-change="dimChanged()")
         auto-complete(source="loadTags($index, $query)",
                                min-length="1",maxResultsToShow="99")

默认三个字符才会自动填充, 不支持模糊搜索

    # 模糊查询
    fuzzySearch = (long, short) ->
        # 检查long是否包含short
        # 按照short的每个字符进行匹配
        # 如long = 'Hello World!',short = 'hlwl'
        # h in long => true, l in long => true, w in long => true, l in long => true
        # 最终表示找到
        re = ''
        for char in short
            re += '.*?' + char
        p = new RegExp(re, 'gi')
        return p.test(long)


    # 返回某个列表中模糊匹配的元素
    getFuzzyMathes = (list, short) ->
        ret = []
        for long in list
            if fuzzySearch(long, short)
                ret.push long
        return ret


    $scope.loadTags = (index, query) ->
        console.log index
        all_tags = []
        all_tags = (i.name for i in $scope.available.values)
        console.log all_tags
        return getFuzzyMathes(all_tags, query)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容