gpt4 book ai didi

javascript - 在 typeahead.js 中触发 "selected"事件

转载 作者:行者123 更新时间:2023-11-29 18:17:09 25 4
gpt4 key购买 nike

我正在使用 typeahead.js 与 0.9.3 并使用 local 填充 dataset

我将函数绑定(bind)到 typeahead:selectedtypeahead:autocompleted 事件,这样我就可以使用所选 typeahead 中的信息填充表单中的其他一些隐藏输入字段基准。

<form id="customer-form" action="/customer-form" method="post">
<input type="text" name="customer-typeahead" placeholder="Customer name" id="customer-typeahead"/>

<input type="hidden" name="customer-id" id="customer-id"/>
<input type="hidden" name="customer-name" id="customer-name"/>
</form>

我在页面上还有一些 HTML 框,我希望这些框中的信息能够填充预输入以及隐藏的输入字段。换句话说,对于下面的 html,如果用户点击 .copy-data div#customer-typeahead#customer-name 应该填充在被点击的 .customer-name div#customer-id 中的文本应使用点击的 .customer-id div 中的文本填充。

<div class="copy-data">
<div class="buffer-div">
<div class="customer-id">1</div>
<div class="customer-name">Andrew</div>
</div>
</div>
<div class="copy-data">
<div class="buffer-div">
<p class="customer-id">2</p>
<p class="customer-name">Bryan</p>
</div>
</div>
<div class="copy-data">
<div class="buffer-div">
<div class="customer-id">3</div>
<div class="customer-name">Cathy</div>
</div>
</div>

我主要使用以下 jquery:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../js/typeahead.min.js" type="text/javascript"></script>
<script src="../js/hogan.js" type="text/javascript"></script>
<script>

$(document).ready(function() {

var typeahead_template = [
'<div style="width: 190px; float:left;">{{value}}</div>',
'<div style="float:right;">{{id}}</div>'
].join('')

function changeTypeahead(obj, datum) {
$('input#customer-id').val(datum.id);
$('input#customer-name').val(datum.value);
};

$('#customer-typeahead').typeahead({
local: [{"value": "Andrew", "id": "1"}, {"value": "Bryan", "id": "2"}, {"value": "Cathy", "id": "3"} ],
limit: 5,
template: typeahead_template,
engine: Hogan
}).bind('typeahead:selected', function(obj, datum) {
changeTypeahead(obj, datum);
}).bind('typeahead:autocompleted', function(obj, datum) {
changeTypeahead(obj, datum);
});

$(".copy-data").click(function(){
id = $(this).find(".customer-id").text();
name = $(this).find(".customer-name").text();

$("#customer-typeahead").typeahead('setQuery', name)
$("#customer-typeahead").trigger('selected');
});
});

</script>

当用户点击 .copy-data div 时,相应的 customer name 会填充输入文本框,但不会填充隐藏输入.我打算以某种方式触发 typeahead:selected 事件,它将适当的 datum 传递给 changeTypeahead 函数,但这似乎并没有正在发生。

有没有办法以这种方式利用 typeahead 及其数据集的 native 功能,或者我必须直接设置隐藏的输入吗?

更新:为了澄清,我想象使用 setQuery 会导致 typeahead 自行“触发”,即匹配查询,自行从数据集中确定适当的数据,并触发所有适当的事件。如果可以避免的话,我宁愿不必在预输入数据集外部重新创建整个基准对象

最佳答案

您似乎忘记将 datum 作为第二个参数传递给您的 selected 触发器。尝试类似的东西:

$("#customer-typeahead").trigger('selected', {"id": id, "value": value});

参见 the documentation for jQuery.trigger

关于javascript - 在 typeahead.js 中触发 "selected"事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22183320/

25 4 0
文章推荐: javascript - jQueryUI - Accordion - 使用 ID 设置事件
文章推荐: Javascript 通过引用或值传递?
文章推荐: javascript - 用户输入带有变量声明的 JavaScript eval
文章推荐: javascript -
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com