格式化jQuery Autocomplete以像下拉菜单一样扩展浏览器/窗口边缘

Formatting jQuery Autocomplete to extend past browser/window edge like drop downs do

本文关键字：扩展 一样 浏览器 边缘 窗口 Autocomplete jQuery 下拉菜单 格式化      更新时间：2024-04-26

我正在尝试自动完成，以像下拉菜单一样扩展到浏览器的底部边缘。

我所说的一个例子如下：http://jsfiddle.net/3gre9q1f/5/（更新为删除css中的html标签每个Twisty）

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

这是一个简单的调用auto-complete的示例，但演示了行为。

这方面的用例是，我有一些模式窗口，自动完成当前像jsfiddle示例一样延伸到窗口底部，这使得很难选择/查看自动完成选项。

下拉菜单延伸到浏览器底部框架

编辑：我确实有ajax数据，我正在使用这些数据来填充自动完成，并且我正在限制返回结果。

答案是使用HTML5数据列表而不是jQuery自动完成。数据列表以本机方式呈现，并从浏览器窗口弹出。在我的特殊情况下，它是一个弹出的模式窗口，自动完成被切断

下面是一个DataList行为的示例，它的工作方式与我想要的一样http://jsfiddle.net/3gre9q1f/7/

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

所以我添加了几个全局变量：

var searchResultsDictionary = {};
var maxListLength = 200;

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

<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);
        }
    });
    }

然后，在保存/创建/下一步函数中，我将文本框值与字典进行比较，得出要进行操作的项的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");               
            }
相关文章：