我正在为我的项目使用twitters typeahead插件。在用户使用以下代码从自动完成建议的列表中选择之后,我试图获取input元素的值
我的HTML:…
根据 文件 你需要使用:
afterSelect: 在选择项目后回调函数执行。它获取参数中的当前活动项(如果有)。
afterSelect:
在选择项目后回调函数执行。它获取参数中的当前活动项(如果有)。
所以你的代码是:
$(".typeahead").typeahead({ source: array, afterSelect: function (suggestion) { console.log('Selection: ' + suggestion); } })
$(document).ready(function () { var array = ["one", "two", "three", "four", "five"] $(".typeahead").typeahead({ source: array, afterSelect: function (suggestion) { console.log('Selection: ' + suggestion); } }) });
.box-sleeve li { display: inline-block; list-style-type: none; padding: 1em; background: red; } .box-sleeve { margin: 15px auto; padding: 0; } .showBorder { outline: 1px dashed #233354; outline-offset: 1px; } .box-tip { display: inline; margin: auto; position: relative; visibility: hidden; padding-left: 10px; } .numberCircle { border-radius: 90%; font-size: 12px; border: 2px solid #000; color: #fff; background: #000; padding: 0 4px; } .numberCircle span { text-align: center; display: block; } li.selected { color: #fff; background-color: #000; } @media (max-width: 768px) { .box-tip span { position: fixed; left: 10px; } .box-tip span.numberCircle { position: fixed; left: 236px; } }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> <input class="typeahead" type="text" placeholder="typeahead">