5
Merhaba Otomatik tamamlama özelliğini, Bootstrap ile birlikte kullanmak istiyorum Bende harici bir json dosyası var. Ben gibi nasıl görüneceğini de dış json eklemişti .. herhangi bir teşekkür refrence Linkler http://timschlechter.github.io/bootstrap-tagsinput/examples/Bootstrap - AutoComplete with TagsInput
bana yardımcı olabilir Kod
bu yardım ancak benzer vardı eğer<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-tagsinput.css" rel="stylesheet" />
<script src="Scripts/jquery-2.0.3.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap-tagsinput.min.js"></script>
<script>
$('input').tagsinput({
typeahead: {
source: function (typehead, query)
{
$.ajax({
url: "http://localhost:56558/keywords/test.html",
dataType: "json",
success: function(data) {
var return_list = [], i = data.length;
while (i--) {
return_list[i] = { Name: data[i].value, value: data[i].id };
}
typeahead.process(return_list);
}
});
}
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" data-role="tagsinput" placeholder="Add tags" />
</div>
</form>
</body>
</html>
[ { "id": "Netta rufina", "label": "Red-crested Pochard", "value": "Red-crested Pochard" }, { "id": "Sterna sandvicensis", "label": "Sandwich Tern", "value": "Sandwich Tern" }, { "id": "Saxicola rubetra", "label": "Whinchat", "value": "Whinchat" }, { "id": "Saxicola rubicola", "label": "European Stonechat", "value": "European Stonechat" }, { "id": "Lanius senator", "label": "Woodchat Shrike", "value": "Woodchat Shrike" }, { "id": "Coccothraustes coccothraustes", "label": "Hawfinch", "value": "Hawfinch" }, { "id": "Ficedula hypoleuca", "label": "Eurasian Pied Flycatcher", "value": "Eurasian Pied Flycatcher" }, { "id": "Sitta europaea", "label": "Eurasian Nuthatch", "value": "Eurasian Nuthatch" }, { "id": "Pyrrhula pyrrhula", "label": "Eurasian Bullfinch", "value": "Eurasian Bullfinch" }, { "id": "Muscicapa striata", "label": "Spotted Flycatcher", "value": "Spotted Flycatcher" }, { "id": "Carduelis chloris", "label": "European Greenfinch", "value": "European Greenfinch" }, { "id": "Carduelis carduelis", "label": "European Goldfinch", "value": "European Goldfinch" } ]
Yeni bağlantı: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ – biakaveron