как завершить бэкэнд для автозаполнения JQuery

Question

У меня есть текстовое поле, внутри я хочу его автозаполнение.Данные для автозаполнения будут передаваться через базу данных.

Это мой Jquery:

 var data = "autocompletetagdata.aspx"
    $("#item").autocomplete({
        source: data
    });


protected void Page_Load(object sender, EventArgs e) {
   return "['word', 'hello', 'work', 'oi', 'hey']";     
} 

Answer 1

Попробуйте:

$("#item").autocomplete({
    source: function (request, response) {
        $.ajax({
            type: "POST",
            url: "autocompletetagdata.aspx/Search",
            data: { "search": request.term },
            contentType: "application/json; charset=utf-8",
            success: function (results) {
                var data = $.parseJSON(results);
                response($.map(data, function (item) { 
                    return { value: item } 
                }))
            }
        });
    }
});

В своем коде сделайте его веб-методом:

[WebMethod]
public static void Search(string search)
{
    string[] list = new [] { "word", "hello", "work", "oi", "hey" };

    return list.Where(x => x.StartsWith(search));
}

Answer 2

Я думаю, что не так, что вы должны возвращать данные в формате json, а не через запятую. Посмотрите на страницу демонстраций , там написано:

Источником данных является серверный скрипт, который возвращает данные JSON, указывается через простой URL-адрес для опции-источника.

Answer 3

@ Трой Барлоу, вы, очевидно, имели в виду

[WebMethod]
public static string[] Search(string search)
{
  string[] list = new[] { "word", "hello", "work", "oi", "hey" };
  return list.Where(x => x.StartsWith(search)).ToArray();
}

Answer 4

В этом примере возвращаемые данные разделяются одинарными кавычками (['word', 'hello', 'work', 'oi', 'hey']), которые не выдают действительный JSON.

Просто замените одинарные кавычки на двойные, и это должно сработать.Пример: «слово» становится «словом».В зависимости от того, как вы строите строку на стороне сервера, вам может потребоваться экранировать двойные кавычки, такие как "[" "word" "," "hello" "и т.д.

protected void Page_Load(object sender, EventArgs e) {
   return "[""word"", ""hello"", ""work"", ""oi"", ""hey""]";     
} 

Удачи.

Answer 5

Автозаполнение данными не так уж сложно. Сначала вам нужно установить тип возврата. Самый простой, как правило, в формате JSON так:

Конец контроллера PHP

// be sure to use echo, not return
echo json_encode($yourDataAsArrayOrObject);

После завершения этой части вернитесь к своему javascript

$("#item").autocomplete({
    // source should be a url to the controller function that returns the data
    source: 'www.yoursite.com/controller/function',
    search: function(e, ui) {}, // here you can manipulate other elements or items while the data is being retrieved,
    select: function(e, ui) { /* ui.item is item slected */ } // here you can manipluate things based on the item that was selected, for instance, save a list of sub data to another dom element
});

Наконец, предостережение

// You will need to use ._renderItem to items as they are received by database.
// For instance, if you want to display the dropdown items in a custom way.
$("#item")._renderItem = function(ul, item) {  
  // the item. depends on the information you got from server
  return ul.append($("<li></li>").prepend($("<h3></h3>").text(item.label)).append($("<p></p>").text(item.value)));
};

Answer 6

 protected void Page_Load(object sender, EventArgs e)
{
    string term = Request.QueryString["term"];
   SqlConnection myConnection = new SqlConnection(connStr);
   myConnection.Open();
   string result = "[";
   int i = 0;
   string SQL = ("select LTRIM(RTRIM(PGPRDC)) As PGPRDC FROM SROPRG SROPRG where PGPRDC like '" + term + "%'");
   SqlCommand myCommand = new SqlCommand(SQL, myConnection);
   StringBuilder sb = new StringBuilder();
   try
      {
        SqlDataReader reader = myCommand.ExecuteReader();
        if (reader.HasRows)
        {
           while (reader.Read())
           {
             result += "";
             result += "\"" + reader.GetString(0) + "\"";                          
             result += ",";
             i += 1;
             sb.Append(reader.GetString(0))
                           .Append(Environment.NewLine);
            }
        }
        reader.Close();
      }
   catch (Exception ex)
   {
      myConnection.Close();
   }
   result = result.Substring(0, result.Length - 1);
   myConnection.Close();
   result += "]";   
   Response.Write(result);  
} 

Answer 7

Поскольку вам кажется, что ничего не работает, убедитесь, что вы изучили основы:

• Загружаете ли вы библиотеки jQuery и jQuery UI? (автозаполнение - это jQuery UI)
• Вы вызываете свой код jQuery внутри функции DOM ready?
• Можете ли вы использовать веб-метод непосредственно в браузере и получить данные обратно?

Answer 8

jQuery autocomplete ожидает в результате json, поэтому это будет работать

return "['word', 'hello', 'work', 'oi', 'hey']";

Для более сложных данных рассмотрите возможность использования JavaScriptSerializer

Answer 9

Согласно: http://www.srikanthtechnologies.com/blog/dotnet/jqueryautocomplete.aspx вместо этого попробуйте вернуть список строк.

[WebMethod]
public static List<string> PopSearch()
{
 return new List<string> { "oi", "oi", "hey"};
}