2015-08-12 2 views
1

Я хочу ограничить использование тегов только полученными от API.Загрузочные теги ввода с typeahead не работают

"Object as tags" example, кажется, что я ищу, но не кажется, машинописный работать, как ожидалось (не открывает не заполнителем)

<input id="tags" type="text"> 

<script> 
    var tags = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: 'http://example.com/tags' 
    }); 
    tags.initialize(); 

    $('input#tags').tagsinput({ 
    itemValue: 'id', 
    itemText: 'name', 
    typeahead: { 
     name: 'tags', 
     displayKey: 'name', 
     source: tags.ttAdapter() 
    } 
    }); 
</script> 

Вот некоторые данные, возвращаемые из API:

[ 
    { 
    "name": "amazon", 
    "createdAt": "2015-07-27T08:28:29.320Z", 
    "updatedAt": "2015-07-27T08:28:29.320Z", 
    "id": "55b5ebad3bbd894909b0eef5" 
    }, 
    { 
    "name": "android", 
    "createdAt": "2015-07-27T08:28:29.398Z", 
    "updatedAt": "2015-07-27T08:28:29.398Z", 
    "id": "55b5ebad3bbd894909b0eef6" 
    }, 
    { 
    "name": "c-sharp", 
    "createdAt": "2015-07-27T08:28:29.485Z", 
    "updatedAt": "2015-07-27T08:28:29.485Z", 
    "id": "55b5ebad3bbd894909b0eef7" 
    }, 
    ... 
] 

Я использую Bootstrap 3.1.0, jQuery 1.10.2, Bootstrap Tags Input 0.4.2 и Typeahead 0.11.1.

+0

Если вы хотите ограничить добавление тегов только определенным набором значений, возможно, Bootstrap Multiselect соответствует вашим потребностям больше, чем входные теги Bootstrap? Здесь [ссылка] (http://davidstutz.github.io/bootstrap-multiselect/). –

+0

И [здесь] (http://silviomoreto.github.io/bootstrap-select/) вы можете найти более расширенную версию. Я не вижу причин, чтобы дать пользователю возможность набрать текст в вашем случае. –

+0

Я бы предпочел использовать библиотеку тегов, поскольку StackOverflow делает –

ответ

0
var tags = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
    url: 'http://example.com/tags', 
    filter: function(response) { 
     return response; 
    } 
    } 
}); 
tags.initialize(); 
+4

Просьба дать некоторое объяснение вашему фрагменту кода –

+0

Таким образом, вы может получить доступ к информированному URL-адресу «http://example.com/tags». – eduardobarbiero

0

Я видел много проблем с typeaheadjs и taginput.

После многих головных болей я нашел решение.

Просто удалите эти последние строки на бутстраповском-tagsinput.js:

$(function() { 
$("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput(); 
}); 

Код библиотека создает tagsinput данных без каких-либо опций, так что ваши вариантов машинописных будут игнорироваться.

Смежные вопросы