JQuery автозаполнение с помощью JSON

Question

Я пробовал так много вещей, но я не понимаю, ооочень запутанно.

У меня есть

<input id="wba" type="search" name="q" value="" class="search box" />
<input type="submit" value="Go" class="search button" />

также файл php

header('Cache-Control: no-cache, must-revalidate');
header('Content-type: application/json');

$arr = array('test'=>'hello world');

echo json_encode($arr);

Что касается javascript, я перепробовал все, включая демонстрации с веб-сайта jquery, но не повезло ... кто-то там, помогите мне настроить автозаполнение для отображения данных?1014 *

Этот код взят с веб-сайта jqueryui (демо) ...

Answer 1

Это должно быть примерно так

// JS
$(function() {
  $("#wba").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "search.php",
        dataType: "jsonp",
        data: { q: request.term },
        success: function(data) {
          response($.map(data, function(value,key) {
            return { label:value.label , value: value.val }
          }));
        }
      });
    },
    minLength: 2
  });
});​

// PHP
$results = array(
   array('label' =>'label1', 'val' => 'value1'),
   array('label' =>'label2', 'val' => 'value2'),
   array('label' =>'label3', 'val' => 'value3')
);
// Optionally do something with the user input ($_GET["input_value"])
echo $_GET['callback'].'('.json_encode($result).');'​​​​​​​​​

Я не знаю почему, но это работает ...

Answer 2

Вот как я реализовал это, используя C # на сервере.

JavaScript

function InitializeElement (element) {
    element.autocomplete("ServerPage.ashx", {
        formatItem: function(data) {
            return "<span style=\"font-size:9pt;word-break:break-all;\">" + data[0] + "<br />" + data[1] + "</span>";
        }
    });
    element.result(function(event, data, formatted) {
        jq(event.currentTarget).siblings('input[type=hidden]').val(data[2]);
        event.currentTarget.value = data[0];
        event.currentTarget.title = data[1];
    });
}

C #

public class ServerPage : ApplicationHandler 
{ 
    protected override void Process()
    {
        String text = (this.Request.Params["q"] ?? String.Empty);

        if (text.Length > 0)
        {
            using (DatabaseRecords records = this.Core.Database.ExecuteRecords("StoredProcedure", new KeyValue("Text", text)))
            {
                while (records.Read())
                {
                    Response.Write(records.GetString("Code") + "|" + records.GetString("Description") + "|" + records.GetInt32("Id") + "\n");   
                }   
            }
        }       
    }
}

Answer 3

Основная предпосылка, без какого-либо кода, такова:

• В jQuery, привязайте прослушиватель событий к входу так, чтобы, когда пользователь что-то печатал, функция называлась
• Затем эта функция отправляет значение ввода в ваш php-скрипт, используя одну из функций jjuery ajax
• Сценарий php выводит строку в кодировке json
• Функция jquery ajax получает строку
• Затем эта функция берет данные json и каким-то стилизованным образом добавляет их к внешней стороне входных данных.
• Каждый из этих параметров привязан к прослушивателю событий, так что при нажатии на параметр что-то происходит - либоввод заполнен выбранным элементом, запущена другая функция, загружена страница и т. д.

Существует много разных способов сделать это, поэтому я не ответил сфактическая функция.Это зависит от ваших целей.