Question

我有一个包含2个字段的表单 - vendor和pav。供应商当前是自动填充文本字段，一旦选择供应商，它就会使用相应的值填充pav字段。我想要做的是在文本字段上添加一个下拉箭头和/或滚动条，这样一旦用户开始输入，它们就可以向上和向下滚动。我真的喜欢做的是将文本字段更改为自动完成组合框，但我发现的教程对于我在jquery中的有限知识有点高级。

我找到的另一个选项是，一旦用户使用

.bind('focus', function(){ $(this).autocomplete("search"); } );

关注某个字段，就会显示整个列表，但不清楚将其放在我的代码中的位置。

以下是我自动完成的jquery代码：


    `Drupal.behaviors.mywebform = {
    attach: function (context, settings) {
                $('#edit-submitted-vendor-exhibitor-info-pav').val(""); 

            $("#edit-submitted-vendor-exhibitor-info-vendor").autocomplete({
                source: "/shipONE/sites/vendorarray.php",
                minLength: 1,

                select: function(event, ui) {
                    $('#edit-submitted-vendor-exhibitor-info-vendor').val(ui.item.vendor);
                    $('#edit-submitted-vendor-exhibitor-info-pav').val(ui.item.pav);            
                }
            });
   }};`

我的php代码返回数据库中的值：

            $("#edit-submitted-vendor-exhibitor-info-vendor").autocomplete({
                source: "/shipONE/sites/vendorarray.php",
                minLength: 1,

                select: function(event, ui) {
                    $('#edit-submitted-vendor-exhibitor-info-vendor').val(ui.item.vendor);
                    $('#edit-submitted-vendor-exhibitor-info-pav').val(ui.item.pav);            
                }
            });
   }};`

感谢您的帮助。

Answer 1

通过执行以下操作，我能够专注于现场工作（这也让我用滚动条下拉）：

新JS

       Drupal.behaviors.mywebform = {
attach: function (context, settings) {
        $('#edit-submitted-vendor-exhibitor-info-pav').val(""); 

        $("#edit-submitted-vendor-exhibitor-info-vendor").autocomplete({
            source: "/shipONE/sites/vendorarray.php",
            minLength: 0,
            scroll: true,
            select: function (event, ui) {
    $(this).autocomplete('disable');
$('#edit-submitted-vendor-exhibitor-info-vendor').val(ui.item.vendor);
$('#edit-submitted-vendor-exhibitor-info-pav').val(ui.item.pav);
}
}}  .blur(function(){
        $(this).autocomplete('enable');
    })
    .focus(function () {
        $(this).autocomplete('search', '');
    });

}};

并且还在我的css中添加了以下内容以添加滚动条并限制显示的选项：

.ui-autocomplete { 
height: 200px; 
overflow-y: scroll; 
overflow-x: hidden;}

将下拉箭头添加到jquery自动填充文本字段

1 个答案: