---編集：フローの説明---
入力フィールドには、基本的に検索している会社の名前である任意の文字列を入力する必要があります。ユーザーが3文字以上を入力すると、AJAX呼び出しがデータベースに送信され、ユーザーのクエリに一致する結果がフェッチされ、GoogleやブラウザのURLバーに検索候補のように表示されます。ユーザーが提案から項目を選択してボタンをクリックすると、さまざまなアクションを実行するsetCompany（）という関数がトリガーされます。
私が欲しいのは、ユーザーがBloodhound、Typeaheadが思いついた提案からアイテムを選択するまで、検索クエリに基づいてさらにアクションをトリガーするボタンを無効にする必要があるということです。
---編集を終了---
以下のコードを使用して、Typeahead、Bloodhoundによって生成されたドロップダウンリストからユーザーが値を選択できるようにします。
$(document).ready(function() {
//Set up "Bloodhound" Options
var my_Suggestion_class = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('keyword'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "{{ URL::to('user/company/%compquery') }}",
filter: function(x) {
return $.map(x, function(item) {
return {keyword: item['name']};
});
},
wildcard: "%compquery"
}
});
// Initialize Typeahead with Parameters
my_Suggestion_class.initialize();
var typeahead_elem = $('.typeahead');
typeahead_elem.typeahead({
hint: false,
highlight: true,
minLength: 3
},
{
// `ttAdapter` wraps the suggestion engine in an adapter that
// is compatible with the typeahead jQuery plugin
name: 'results',
displayKey: 'keyword',
source: my_Suggestion_class.ttAdapter(),
templates: {
empty: 'No Results'
}
});
});
HTMLは次のとおりです。
<div class="iner-sub-header" style="border-bottom: 1px solid #ccc;">
<div class="row" style = "background-color: white;">
<div class="col-md-12 heading">
<div id = "results" class="col-md-12 col-xs-12 results">
<span class="glyphicon glyphicon-search span-search" aria-hidden="true"></span>
<input type="search" class="typeahead custom-input-padding" placeholder="Search Company" id="keyword" onselect="setCompany();">
<button class="btn go-btn" id="go" onclick="setCompany()">SEARCH</button>
</div>
</div>
</div>
</div>
Typeaheadによって生成されたドロップダウンからユーザーが何かを選択するまで、setCompany（）機能をトリガーするボタンが無効になっていることを確認したいと思います。
誰か助けてくれませんか？
これは私のためにそれを働かせました。今では完全に機能しています。
$(document).ready(function() {
//Set up "Bloodhound" Options
var my_Suggestion_class = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('keyword'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "{{ URL::to('user/company/%compquery') }}",
filter: function(x) {
return $.map(x, function(item) {
return {keyword: item['name']};
});
},
wildcard: "%compquery"
}
});
// Initialize Typeahead with Parameters
my_Suggestion_class.initialize();
var typeahead_elem = $('.typeahead');
typeahead_elem.typeahead({
hint: false,
highlight: true,
minLength: 3
},
{
// `ttAdapter` wraps the suggestion engine in an adapter that
// is compatible with the typeahead jQuery plugin
name: 'results',
displayKey: 'keyword',
source: my_Suggestion_class.ttAdapter(),
templates: {
empty: 'No Results'
}
}).on("typeahead:selected typeahead:autocompleted", function(ev, my_Suggestion_class) {
$("#go").prop("disabled", false);
});
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加