提前输入问题：建议的项目未正确显示

Question

我想将建议菜单绑定到客户名称的输入。

我的问题：菜单中建议的项目有效，但不能以正确的格式显示when data comes from a remote call，并且问题不存在when data comes from a local json file

以下是一个有效数据，另一个是无效数据：

• 无效的示例（数据由网络服务器获取） 我已经花了很多时间并使用其他版本
• 有效示例（数据位于本地json文件中）

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 的旧版本，但没有任何用处

       

  我不怎么感谢任何人的帮助