Member 12619971 Ответов: 2

Как я могу автоматически заполнить текстовое поле с помощью jquery

Я пытаюсь создать текстовое поле, которое будет автоматически заполняться из базы данных SQL. Я проверил свой обработчик, и он работает. Мне трудно его реализовать.

Я знаю, что об этом уже спрашивали раньше, но я просто не понимаю.

Любая помощь приветствуется!
Джеймс

Что я уже пробовал:

<pre><%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeBehind="Default.aspx.vb" Inherits="Mercer911._Default"%>
    
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.12.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
    <link href="Styles/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $(txtOldAddress).autocomplete({
                source: 'OldaddressHandler.ashx'
            });
        });
       
    </script>

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent" >
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
         </p>
<p>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString2 %>" ProviderName="<%$ ConnectionStrings:MyConnectionString2.ProviderName %>" SelectCommand="SELECT [AddressID], [OldAddress], [NewAddress] FROM [AdddressTable]"></asp:SqlDataSource>
</p>
<p>
        <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="OldAddress" DataValueField="OldAddress">
        </asp:DropDownList>
    </p>
    <p>
        <asp:TextBox ID="txtOldAddress" runat="server" Height="20px" Width="278px"></asp:TextBox>
    </p>
</asp:Content>

j snooze

Я использовал нижеприведенное для автозаполнения jquery. Первый БИТ проверяет нажатую клавишу, и если это клавиша TAB, выберите значение, на котором они находятся. Ниже с помощью автозаполнения назначается действие функции источнику с помощью jQuery ajax call to my service page (ваша страница ashx). Сервис возвращает json в объектном формате. Фильтр поиска - это то, что человек набирает, что я отправляю в свой сервис. Свойство minLength автозаполнения - это количество символов, которые вы хотите иметь в типе человека, прежде чем перейти к захвату автозаполнения. Я выбрал 3, потому что не хотел, чтобы огромный список пугал пользователей. Может быть, это поможет.

$("input[id*='txtAssignedTo']"). bind ("keydown", функция (событие) {
если (событие.код клавиши === $.пользовательского интерфейса.код ключа.TAB &&
$(этот).данных("ИП-авто").меню.активный) {
событие.метод preventDefault();
}
}).функция автозаполнения({
источник: функция (запрос, ответ) {
$.Аякс({
адрес: {myserviceurl},
тип данных: 'jsonp',
данные: 'searchFilter=*' + request. term + '*',
успех: функция (данные) {
ответ ($. map(data, function (item) {
вернуть {
этикетка: товар.Полное имя + " - " + элемент.идентификатор пользователя,
значение: предмет.идентификатор пользователя
}
}));
}
});
},
минимальная длина: 3,
выберите: функция (событие, пользовательский интерфейс) {
это.значение = ИП.пункт;
}
});

2 Ответов

Рейтинг:
2

F-ES Sitecore

Видите ли вы какие-либо ошибки в консоли браузера? Может быть много чего. Во-первых

$(txtOldAddress).autocomplete({


что такое txtOldAddress? Похоже, что это просто необъявленная и неопределенная переменная. Если вы думаете, что это будет относиться к этому

<asp:TextBox ID="txtOldAddress" runat="server" Height="20px" Width="278px"></asp:TextBox>


затем просмотрите источник страницы (помните, что js находится на клиенте, он запускает то, что вы видите в источнике браузера, а не то, что вы видите на своей странице aspx), видите ли вы какой-либо элемент с идентификатором txtOldAddress? Даже если бы существовал такой элемент, имена переменных автоматически не ссылаются на html-элементы управления, вы должны использовать getDocumentById.

Далее у вас могут возникнуть проблемы с ссылками на url-адреса.

source: 'OldaddressHandler.ashx'


это будет работать до тех пор, пока файл ashx находится в той же папке, что и страница содержимого. Так ли это? Можете ли вы гарантировать, что так будет всегда? Тогда есть ваш файл ashx, там тоже могут быть проблемы. Вам действительно нужно научиться отлаживать свой клиентский и серверный код, чтобы вы могли хотя бы определить, где могут быть различные проблемы или в какой момент код терпит неудачу.

Вот базовый шаблон для получения работы автозамены, он предполагает, что соответствующие файлы jQuery и jQuery UI правильно ссылаются и ссылаются перед скриптом на странице.

<asp:TextBox runat="server" ID="txtOldAddress" />
    
<script>
    $(document).ready(function () {
        $("#<%=txtOldAddress.ClientID %>").autocomplete({
            source: '<%=Page.ResolveUrl("~/OldaddressHandler.ashx") %>'
        });
    });
</script>


public void ProcessRequest(HttpContext context)
{
    string term = context.Request.QueryString["term"];

    // I'll just return the term with a number appended as sample data

    var data = Enumerable.Range(1, 3).Select(i => new { label = term + " " + i.ToString(), value = i.ToString() });

    var s = new System.Web.Script.Serialization.JavaScriptSerializer();

    context.Response.ContentType = "text/json";
    context.Response.Write(s.Serialize(data));
}


Примечание. Я использую Page.ResolveURL для получения моих URL-адресов, поэтому мне не нужно беспокоиться об их расположении относительно страницы, и я использую ClientID, чтобы получить правильный идентификатор для текстового поля.

Рейтинг:
2

uvpurohit

Попробовать это- 

$("#txtOldAddress").autocomplete({
    source: function (request, response) {
        $.ajax({
            type: "POST",
            url: "OldaddressHandler.ashx",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            success: function (sendResponse) {
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }
});