Проблема с типом головы: предлагаемые элементы не отображаются должным образом - PullRequest
Новая
       39

Проблема с типом головы: предлагаемые элементы не отображаются должным образом

0 голосов
/ 30 августа 2018

Я хочу привязать меню предложений к вводу имени клиента.

Моя проблема: пункты, предложенные в меню, действительны, но не отображаются в правильной форме when data comes from a remote call, и проблема не существует when data comes from a local json file

Ниже приведены одни действительные данные и другие недействительные:

  • Неверный пример (данные извлекаются веб-сервером) enter image description here Я провел много часов и использовал другие версии
  • Допустимый пример (данные находятся в локальном файле json) enter image description here

HTML код: 

    <div id="first_party_full_name" class="typeahead_container">
    <input autocomplete="on" required class="form-control input-lg typeahead" type="text" name="customer_name" placeholder="Customer (sender) name">
    <span class="label label-primary typeahead_icon typeahead_icon-left">
        <i class="fa fa-edit"></i>
    </span>
    <span id="btn_new_customer" class="label label-default typeahead_icon typeahead_icon-right" data-toggle="tooltip" data-placement="top"
        data-original-title="Add New User">
        <i class="fa fa-plus"></i>
    </span>
</div>
<div id="country" class="typeahead_container">
    <input autocomplete="on" required class="form-control input-lg typeahead" type="text" name="country" placeholder="Destination Country">
    <span class="label label-primary typeahead_icon typeahead_icon-left">
        <i class="fa fa-map-marker"></i>
    </span>
</div>
<script type="text/javascript" src="{% static 'js\plugins\typeahead\typeahead.jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js\plugins\typeahead\typeahead.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'js\plugins\typeahead\bloodhound.min.js' %}"></script>

Код Javascript 

var countries = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: "http://127.0.0.1:8899/static/dataset/countries.json"
});
$('#country .typeahead').typeahead({
    hint: false,
    highlight: true,
    minLength: 2
}, {
        name: 'countries',
        source: countries
    });
var names = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: "http://127.0.0.1:8899/customer/customer_all_names/",
    // remote: {
    //     url: "http://127.0.0.1:8899/customer/customer_all_names/",
    // }
});

$('#first_party_full_name .typeahead').typeahead({
    hint: false,
    highlight: true,
    minLength: 2
}, {
        name: 'customer_names',
        source: names   // name_matcher
    });

Ответ (несколько строк): 

 - First input (Customer Names):
    ["Jody  Brown PhD Reynolds",
    "Michael  Underwood Montes",
    "Rebecca Gilbert  Smith",
    "Johnny Mcdowell Williams",]

 - Second input (countries):
    ["Ukraine",
    "United Arab Emirates",
    "United Kingdom",
    "United States",
    "United States Minor Outlying Islands",
    "Uruguay"]

Примечания:

  • Имена клиентов (упомянутые в первом примере) хранятся в маленькой базе данных (sqlite), я не хочу сохранять их как json (как данные во втором примере)

  • Я потратил много часов на решение этой проблемы, я пытался использовать более старую версию typeahead и ничего не помогло

    Не знаю, как поблагодарить кого-либо, кто предлагает помощь

...