Question

我使用了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>');

                    }));

                }
           });
        }
    });

Answer 1

输入始终使用.val();

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

但是将HTML附加到输入中是没有意义的，所以最好使用

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

随着更新的问题，更新的答案。您可以使用append()

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

Answer 2

您正在尝试将选项放在select标记内，并且您的jquery选择器显示您正在选择input元素。

因此你需要改变这个：

$('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标记内的内容，最终只会导致一个option标记循环。并且.append()会继续将option添加到您的select代码中，您将在循环结束时获得所有选项。

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

Answer 3

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

这就是我的所作所为：

$('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自动完成结果。

感谢您的建议。我将把它作为我未来研究的参考。再次感谢。

如何获取ajax响应并将其附加到HTML？

3 个答案: