0

我需要创建一个自动完成jQuery脚本，该脚本将过滤来自 .csv（或 xml 等）文件的信息，选择后结果将显示所有信息。
据我了解，我将不得不使用我整天都在学习的 jquery 自动完成脚本，我希望有一个解决方案。
我有基本的编码知识，我需要它来过滤文本文件中的结果。
文本文件 .csv 的示例是：

"UK", "info1", "info2", "info2", "info3"
"ITALY", "info1", "info2", "info2", "info3"
"etc", "info1", "info2", "info2", "info3"

因此，当用户键入 UK 时，也会出现标志，单击 UK 后会显示 info1、2、3。
我知道我需要处理这样的事情，但是如何用我自己的 xml、csv 等文件替换 geo xml？
http://jqueryui.com/autocomplete/#remote-jsonp
还有如何加载标志？

在此示例代码中，它将从具有 2 个值的 txt 文件中过滤。 "12": "Italy", 我怎样才能添加更多？
示例："12": "125": "54": "Italy",将不起作用
如何添加标志图像来加载？
这是完整的js：

$(function () {
    'use strict';

    // Load countries then initialize plugin:
    $.ajax({
        url: 'content/countries.txt',
        dataType: 'json'
    }).done(function (source) {

        var countriesArray = $.map(source, function (value, key) { return { value: value, data: key }; }),
        countries = $.map(source, function (value) { return value; });

        // Setup jQuery ajax mock:
        $.mockjax({
            url: '*',
            responseTime:  200,
            response: function (settings) {
                var query = settings.data.query,
                queryLowerCase = query.toLowerCase(),
                suggestions = $.grep(countries, function(country) {
                    return country.toLowerCase().indexOf(queryLowerCase) !== -1;
                }),
                response = {
                    query: query,
                    suggestions: suggestions
                };

                this.responseText = JSON.stringify(response);
            }
        });

        // Initialize ajax autocomplete:
        $('#autocomplete-ajax').autocomplete({
            serviceUrl: '/autosuggest/service/url',
            onSelect: function(suggestion) {
                $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
            }
        });

        // Initialize autocomplete with local lookup:
        $('#autocomplete').autocomplete({
            lookup: countriesArray,
            onSelect: function (suggestion) {
                $('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
            }
        });

        // Initialize autocomplete with custom appendTo:
        $('#autocomplete-custom-append').autocomplete({
            lookup: countriesArray,
            appendTo: '#suggestions-container'
        });

    });

});


这是html：

    <h2>Ajax Lookup</h2>
    <p>Type country name in english:</p>
    <div>
        <input type="text" name="country" id="autocomplete-ajax"/>
    </div>
    <div id="selction-ajax"></div>

    <h2>Local Lookup</h2>
    <p>Type country name in english:</p>
    <div>
        <input type="text" name="country" id="autocomplete"/>
    </div>
    <div id="selection"></div>

    <h2>Custom Lookup Container</h2>
    <p>Type country name in english:</p>
    <div>
        <input type="text" name="country" id="autocomplete-custom-append" style="float: left;"/>
        <div id="suggestions-container" style="position: relative; float: left; width: 400px; margin: 10px;"></div>
    </div>
</div>

<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mockjax.js"></script>
<script type="text/javascript" src="src/jquery.autocomplete.js"></script>
<script type="text/javascript" src="scripts/demo.js"></script>

4

0 回答 0