Jquery 如何获取ajax响应并将其附加到html中？

我使用了jquery的自动完成功能，我想要的不是在文本框中显示所有结果，而是在选择框中显示所有数据。但我不知道怎么做。以下是我的一些代码：

<td>
    <input type="text" name="filter_product_name" id="filter_product_name" value="" />
    <select name="parent_selection">
        <option value="0">Not Set</option>
    </select>
</td>

…ajax过程

 $('input[name=\'filter_product_name\']').autocomplete({
        delay: 500,
        source: function(request, response) {
           $.ajax({
                url: 'index.php?route=catalog/product/autocomplete_product&token=<?php echo $token; ?>&filter_product_name=' +  encodeURIComponent(request.term),                                                                                                                                                        
                dataType: 'json',
                beforeSend: function() {

                },
                success: function(json) {

                    response($.map(json, function(item) {

                        $('select[name=\'parent_selection\']').html('<option value="'+item.product_id+'">'+item.product_name+'</option>');

                    }));

                }
           });
        }
    });

输入时始终使用.val

---

您试图将select选项放在select标记中，而jquery选择器显示您正在选择输入元素

因此，您需要更改以下内容：

$('input[name=\'parent_selection\']').html('<option value="'
 +item.product_id+'">'+item.product_name+'</option>');

为此：

$('select[name="parent_selection"]').append('<option value="'
 +item.product_id+'">'+item.product_name+'</option>');

并使用.append而不是.html，因为.html将替换select标记中的内容，这将导致在循环结束时只生成一个选项标记。And.append将继续向select标记添加选项，您将在循环结束时获得所有选项

另外，您不需要使用转义字符\'作为名称，您可以使用双引号代替。

好的，伙计们， 在阅读了网络上的一些代码后，我找到了一个答案的解决方案

以下是我所做的：

$('input[name=\'filter_product_name\']').autocomplete({
    delay: 500,
    source: function(request, response) {
       $.ajax({
            url: 'index.php?route=catalog/product/autocomplete_product&token=<?php echo $token; ?>&filter_product_name=' +  encodeURIComponent(request.term),                                                                                                                                                        
            dataType: 'json',
            beforeSend: function() {

            },
            success: function(json) {

                $html = '';

                response($.map(json, function(item) {
                    console.log(item);
                    $html += '<option value="'+item.product_id+'">'+item.product_name+'</option>';
                }));

                $('select[name=\'parent_selection\']').html($html);                                                                                                                                                                                                                                

            }
       });
    }
});

它会在我的选择框中返回ajax自动完成结果

---

谢谢你的建议。我将以此作为今后学习的参考。再次感谢。

我真的不认为插件是这样工作的，它会在响应函数中将html返回给输入，而将选择返回给输入实际上没有任何作用？正如我在回答中所建议的，您不需要使用转义符\'，而是使用双quetes。

$('input[name=\'parent_selection\']').html('<option value="'
 +item.product_id+'">'+item.product_name+'</option>');

$('select[name="parent_selection"]').append('<option value="'
 +item.product_id+'">'+item.product_name+'</option>');

$('input[name=\'filter_product_name\']').autocomplete({
    delay: 500,
    source: function(request, response) {
       $.ajax({
            url: 'index.php?route=catalog/product/autocomplete_product&token=<?php echo $token; ?>&filter_product_name=' +  encodeURIComponent(request.term),                                                                                                                                                        
            dataType: 'json',
            beforeSend: function() {

            },
            success: function(json) {

                $html = '';

                response($.map(json, function(item) {
                    console.log(item);
                    $html += '<option value="'+item.product_id+'">'+item.product_name+'</option>';
                }));

                $('select[name=\'parent_selection\']').html($html);                                                                                                                                                                                                                                

            }
       });
    }
});