基于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)

你可能感兴趣的:(基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput)