Question

我正在尝试自动完成以延伸到浏览器底部边缘，例如下拉。

我正在谈论的一个例子是： http://jsfiddle.net/3gre9q1f/5/（更新为删除每个Twisty的css中的html标签）

var aTags = [  "ActionScript",
  "AppleScript" ...... ];
 $( "#tags" ).autocomplete({
        source: aTags
    });

这是一个调用自动完成但是演示行为的简单示例。

这个用例就是我有模态窗口，自动完成当前延伸到窗口底部，就像jsfiddle示例那样，并且很难选择/查看自动完成选项。

Drop Down extending past browser bottom frame

编辑：我有ajax数据，我正在使用填充自动完成，我限制返回结果。

Answer 1

答案是使用HTML5 Datalist而不是jQuery自动完成。 Datalists以原生方式呈现并弹出浏览器窗口。在我的特殊情况下，它是一个弹出模式窗口，其中自动完成被切断。

这是DataList行为的一个例子，其工作方式与我想要http://jsfiddle.net/3gre9q1f/7/

一样

最大的缺点是这种方法目前不适用于Safari或Native IOS浏览器，实现有点笨拙。您必须调整datalist的宽度，并将选项的值粘贴在javascript字典中以供将来查找，因为某些浏览器会搜索选项文本，而其他浏览器会搜索选项值，从而破坏自动完成。

所以我做的是添加几个全局变量：

var searchResultsDictionary = {};
var maxListLength = 200;

然后在我的表单/页面中创建了一个空的datalist

<input type="text" list="searchList" id="search" placeholder="Search" required />
<datalist id="searchList" style="width:auto; position:relative;"   ></datalist>

然后我用一个与文本框上的输入更改绑定的ajax调用填充它

    $("#search").on('input propertychange paste', function () {

    var searchval = $("#search").val();
    if (searchval != null && searchval.length > 1) { 
        LoadsearchResults(searchval); 
    }

});
function LoadsearchResults(searchFor) {
    var url = "this.website.some.made.up";

    $.ajax({
        url: url,
        data:
            {
                values: searchFor
            },
        dataType: 'json',

        success: function (data) {
                $("#searchList").empty();
                 var charwidth = 5.6;

            $.map(data, function (item) {

                // Add the <option> element to the <datalist>.

                    var innerOption = item.FirstElement + ' 1st ' + item.SecondElement + ' - 2nd# ';
                    var option = "<option data-value='" + item.SearchItemID + "'>" + innerOption + "</option>";
                    $("#searchList").append(option);
                    resultsDict[innerOption] = item.SearchItemID;
                    if (innerOption.length * charwidth > maxListLength) { maxListLength = innerOption.length * charwidth; }


            });

            if (maxListLength > 495) { maxListLength = 495; }
            $("#search").css("width", (maxListLength + 5));
            $("#search").focus();
            $("#search").css("width", (maxListLength + 5));

        },

        error: function (xhr, textStatus, errorThrown) {

            alert('Error: ' + xhr.responseText);
        }
    });
    }

然后在save / create / next步骤中，我将文本框值与字典进行比较，得出要对其进行处理的项目的ID。

           var searchId = ""; // search item to create
            var labelLookfor = $("#search").val();
            searchId = searchResultsDictionary[labelLookfor];  

            if (searchId != null && searchId.length > 0) {
                //Here's where the Save/Next step would be called

            }else{
                alert("Search Lookup Not Found");               
            }

格式化jQuery自动完成以扩展浏览器/窗口边缘，如下拉操作

1 个答案: