有条件的Twitter Typeahead

问题描述

我正在尝试弄清楚如何进行条件性Twitter提前输入。这样,在用户进入客户之后,联系人将被过滤以仅显示该客户的联系人。

客户提前输入效果很好。那里没有问题。但是,当我为联系人编写JQuery时,问题就从此开始。

    function AutoCompleteContact() {
        var contacts = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),queryTokenizer: Bloodhound.tokenizers.whitespace,remote: {
                url: '../api/contact/names/ByCustomer/' + $('#typeahead_Customer').val(),}
        });

问题似乎出在$('#typeahead_Customer')。val()上,因为开发人员工具没有给出任何结果或奇怪的结果。如果我将一个ID硬编码到Api中,我将获得该ID的正确结果。

所以问题是

  1. 是否有适当的方法来进行有条件的Twitter预输入(联系方式 是特定于先前选择的客户)?
  2. .val()是否应该做一些特别的事情?还是我应该使用一些 其他指标?我尝试过.prev()。val()可能是 技术上是先前输入的内容

编辑:这是代码查找表单的方式:

<form action="/Quote/Create" method="post">
<div class="form-group col-lg-10">
    <label for="Customer_Name">Name</label>
    <div class="tt-container">
        <span class="twitter-typeahead" style="position: relative; display: inline-block;">
            <input class="form-control input-lg tt-hint" type="text" value="" readonly="" autocomplete="off"
                spellcheck="false" tabindex="-1" dir="ltr"
                style="position: absolute; top: 0px; left: 0px; border-color: transparent; Box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-Box border-Box rgb(255,255,255);">
            <input class="form-control input-lg tt-input" id="typeahead_Customer" name="Customer.Name" type="text"
                value="" autocomplete="off" spellcheck="false" dir="auto"
                style="position: relative; vertical-align: top; background-color: transparent;">
            <pre aria-hidden="true"
                style="position: absolute; visibility: hidden; white-space: pre; font-family: Lato,&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif; font-size: 19px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
            <div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
                <div class="tt-dataset tt-dataset-customer">
                </div>
            </div>
        </span>
    </div>
</div>
<div class="form-group col-lg-10">
    <label for="Contact_FirstName">FirstName</label>
    <div class="tt-container">
        <span class="twitter-typeahead" style="position: relative; display: inline-block;">
            <input class="form-control input-lg tt-hint" type="text" value="" readonly="" autocomplete="off"
                spellcheck="false" tabindex="-1" dir="ltr"
                style="position: absolute; top: 0px; left: 0px; border-color: transparent; Box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-Box border-Box rgb(255,255);">
            <input class="form-control input-lg tt-input" id="typeahead_Contact" name="Contact.FirstName"
                type="text" value="" autocomplete="off" spellcheck="false" dir="auto"
                style="position: relative; vertical-align: top; background-color: transparent;">
            <pre aria-hidden="true"
                style="position: absolute; visibility: hidden; white-space: pre; font-family: Lato,sans-serif; font-size: 19px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
            <div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
                <div class="tt-dataset tt-dataset-name"></div>
            </div>
        </span>
    </div>
</div>
<button type="submit" class="btn btn-primary">Save</button>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)