JQuery UI Автозаполнение JSON ответ на вопрос

Question

Я провел массу исследований и до сих пор не понимаю, как использовать автозаполнение jQuery ui. Автозаполнение не работает, и я не уверен, почему. Любая помощь будет оценена!

У меня есть следующее на фронтенде. 1. JQuery правильно связан. 2. JQuery-UI правильно связаны. 3. JQuery-UI CSS правильно связаны.

<script>
$("#tags").autocomplete({
source: function(request, response){
$.post("/panel/tags.php", {data:request.term}, function(data){     
    response($.maps(data, function(item) {
    return {
        label: item.tagName,
        value: item.tagID
    }
    }))
}, "json");
},
minLength: 2,
dataType: "json",
cache: false,
focus: function(event, ui) {
return false;
},
select: function(event, ui) {
this.value = ui.item.label;
/* Do something with user_id */
return false;
}

});
</script>


<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" size="50" />
</div>

На сервере:

$query_tags = "SELECT tagID, tagName FROM DCB_Tags WHERE tagName LIKE '".$_GET['tags']."%' ORDER BY tagName ASC LIMIT 10";
$result_tags = mysql_query($query_tags)  or die ("Error: " . mysql_error());

$response = array();
$tags = array();
while($row=mysql_fetch_array($result_tags)) 
{ 
$tagID=$row['tagID']; 
$tagName=$row['tagName']; 
$tags[] = array('tagID'=> $tagID, 'tagName'=> $tagName);

} 

header("content-type: text/javascript");
echo json_encode($tags);
exit();

Выход для этого:

[{ "TagID": "1", "тэгу": "искусство"}, { "TagID": "4", "тэгу": "искусство шоу "}, {" TagID ":" 3" , "тэгу": "исполнитель"}, { "TagID": "2", "тэгу": "дизайн"}]

Если вы открываете страницу с помощью тега = art, это корректно исключает «дизайн».

Answer 1

Похоже, вы делаете post, а затем пытаетесь подобрать $_GET['tags'] на странице php.Итак, попробуйте использовать функцию ajax и набрать $_GET['term'] на своей странице php.Кроме того, $.maps не является функцией.Я думаю, что вы имели в виду $.map.

И, если вы хотите, чтобы label в качестве значения ввода, то не указывайте поле value.При автозаполнении будет использоваться label для обоих, если вы укажете только одно.

jQuery autocomplete:

$("#tags").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "/panel/tags.php",
            dataType: "json",
            data: {term: request.term},
            success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            label: item.tagName
                       };
                }));
            }
        });
    },
    minLength: 2,
    select: function(event, ui) {
      /* Do something with user_id  */
    }
});

PHP:

$query_tags = "SELECT tagID, tagName FROM DCB_Tags WHERE tagName LIKE '".mysql_real_escape_string($_GET['term'])."%' ORDER BY tagName ASC LIMIT 10";

Ссылка на учебное пособие: http://www.jensbits.com/2011/08/24/using-jquery-autocomplete-when-remote-source-json-does-not-contain-label-or-value-fields/

Answer 2

Я поставил "оповещение (data.length);"в начале функции успеха, чтобы проверить правильность данных, полученных с сервера.Из-за этого элемент управления jquery не смог отобразить что-либо при получении данных.