Блог

Я пытаюсь выяснить, как сделать условный заголовок типа 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(), поскольку инструменты разработчика не дают никаких или странных результатов. Если я жестко закодирую идентификатор в Api, я получу правильные результаты для этого идентификатора.

Итак, вопрос

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, amp;quot;Helvetica Neueamp;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, 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, amp;quot;Helvetica Neueamp;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-name"></div>
            </div>
        </span>
    </div>
</div>
<button type="submit" class="btn btn-primary">Save</button>