Question

我正在使用jquery-ui自动完成来从SQL数据库中检索项目，该数据库工作正常，但我想将自动完成列表移动到页面的另一部分。

我一直在尝试使用here中的位置选项，但在申请代码时似乎无法获得正确的语法？

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.js"></script>
 <script type="text/javascript">
    $(function () {
        $("#txtCity").autocomplete({
            source: function (request, response) {
                var param = { cityName: $('#txtCity').val() };
                $.ajax({
                    url: "test.aspx/GetCities",
                    data: JSON.stringify(param),
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                value: item
                            }
                        }))

                    },

                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            select: function (event, ui) {
                event.preventDefault();
                minLength: 2//minLength as 2, it means when ever user enter 2 character in TextBox the AutoComplete method will fire and get its source data. 
            }


        });
    });

    </script>

Answer 1

我想将自动填充框移动到文本框的右侧。

经过一夜的睡眠，我今天早上的第一次尝试再次正常工作，我想我原本只是在昨天的一次尝试中错过了一个逗号。

我只是使用数组而不是ajax调用将其剥离回基本实现，然后将工作语法应用于我的代码。

昨天浪费了FAR这么多时间，只是显示退后一步，离开屏幕的时间有助于解决问题！

感谢您的帮助

记录的工作代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery AutoComplete TextBox Demo</title>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
</head>
<body>
<form id="form1" runat="server">
<div><h1>AutoComplete Textbox</h1>
Software
<asp:TextBox TextMode="multiline" Columns="50" Rows="5" ID="txtCity" runat="server"></asp:TextBox>
</div>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
    $("#txtCity").autocomplete({
        source: function (request, response) {
            var param = { cityName: $('#txtCity').val() };
            $.ajax({
                url: "test.aspx/GetCities",
                data: JSON.stringify(param),
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            value: item
                        }
                    }))

                },

                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        position: {
            my: "left center",
            at: "right center",
        },
        select: function (event, ui) {
            event.preventDefault();
            minLength: 2//minLength as 2, it means when ever user enter 2 character in TextBox the AutoComplete method will fire and get its source data. 
        }
    });
});


</script>
</body>
</html>

jquery-ui自动完成位置

1 个答案: