Question

我有一个<input>字段，当你开始输入内容时，会返回一个带有结果的实时ajax结果，类似于＆＃34;自动建议＆＃34;除了<input>之外，结果显示在<div>中，而不是<input class="getter" id="search" name="search" type="text" value="" /> <div class="data" id="results"> Gonzo </div>。问题是它没有以预期的方式返回结果。它似乎只返回一个结果，＆＃34; last＆＃34;一个，如果你愿意。下面是我在网上找到的代码，并根据我的需要进行调整。

所以我有以下HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    $(document).ready(function() {

        $('#search').keyup(function() {
            var q = $(this).val();
            var regex = new RegExp(q, "i");
            var count = 1;
            var output = '';
            $.getJSON('http://www.fizzydrink.eu/alice.json', function(data) {
                $.each(data, function(key, val) {
                    if ((val.name.search(regex) != -1)) {
                        output = val.name + val.color;
                        if(count%2 == 0) {
                            output = '<p></p>';
                        }
                        count++;
                    }
                });
                $('#results').html(output);
            });
        });

    });
</script>

以及以下JavaScript

[
    {"name":"alice","color":"red","at":"@alice"},
    {"name":"albert","color":"cyan","at":"@albert"},
    {"name":"bob","color":"green","at":"@bob"},
    {"name":"bertrand","color":"purple","at":"@bertrand"},
    {"name":"peter","color":"blue","at":"@peter"}
]

您可以在jsFiddle上找到演示。另外，下面附带的是原始JSON文件：

{{1}}

Answer 1

您正在创建输出变量：

output = '';

但是，不是连接，而是不断用新字符串替换它：

//Instance 1
output = val.name + val.color;

//Instance 2
output = '<p></p>';

相反，你应该加入它：

//Explicitly
output = output + val.name + val.color;

//Shorthand (does exactly the same as the line above)
output += val.name + val.color;

JSON结果无法正确返回。出乎意料的结果。 jQuery + Ajax + JSON

1 个答案: