如何使用自動完成功能從JSON調用構造和返回鍵值對

Question

我目前正在使用動態輸入自動填充功能，目前我的自動填充功能正常。

我基本上需要從JSON返回2個值。 一個是歌曲的ID ，另一個是歌曲的title 。 ID是該表的主鍵，因此它總是不同的。

我想我可以使用鍵/值來做到這一點，其中key是ID ， value是title 。

用戶現在單擊輸入字段時，它將同時返回該字段中歌曲的ID和title 。 我需要做的就是將title放在字段中，然后將ID發送給我的jquery/AJAX然后發送給我的PHP腳本。

到目前為止，這已返回。 我只想在輸入字段中輸入標題，但需要ID發送給php。

我什至不確定我是否在正確構造JSON回調以執行此操作。

這是我到目前為止的順序

JQUERY自動完成

$(document).on('focus', 'div.form-group-options div.input-group-option:last-child input', function(){
    var sInputGroupHtml = $(this).parent().html();
    var sInputGroupClasses = $(this).parent().attr('class');
    $(this).parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>');
    $('.searchsong').autocomplete({
        source:'../includes/searchaddsong.php',
        minLength:0,
        select: function(event,ui){ <--THIS IS THE SECTION I THINK I NEED TO RETURN THE ID AND TITLE BUT I DONT KNOW HOW TO PLACE JUST THE TITLE INTO THE INPUT FIELD AND NOT THE ID AS WELL
        }
    });
});
$(document).on('click', 'div.form-group-options .input-group-addon-remove', function(){
    $(this).parent().remove();
});

searchaddsong.php

更新：編輯此searchaddsong.php我想我已經知道了

<?php
include('connect.php');
$key="a";
$array = array();
$sql = "SELECT * FROM wafilepaths WHERE title LIKE '%{$key}%'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
    $array[] = array(
        $row['ID'] => $row['title']
    );
}
echo json_encode($array);
?>

HTML

<input class="form-control searchsong" name="searchsong[]" id="searchsong" type="text" placeholder="Type Something" />

AJAX

$(".loginFormAddSetlist").submit(function () {
var church_code = $('.church_code').val();
var dayofweek = $('.dayofweek').val();
var datepicker = $('.datepicker').val();
var searchsong = $('.searchsong').val();
    $.ajax({
        type: "POST",
        url: "../includes/uploadsetlist.php?",
        data:({church_code: church_code, dayofweek: dayofweek, datepicker: datepicker, searchsong: searchsong}),
        success: function(data) {
            $('div.alert4').fadeIn();
            $('div.alert4').html(data);
            $('div.alert4').delay(5000).fadeOut();
        }
    });
return false;
});

uploadsetlist.php

<?
    $ID = $_GET['ID'];
?>

Answer 1

您可以從select選項的ui參數訪問這些值。

$('.searchsong').autocomplete({
    source:'../includes/searchaddsong.php',
    minLength:0,
    select: function(event,ui){ 
        alert(ui.item.label + ": " + ui.item.value);
    }
});

在文檔中可以找到有關此功能的詳細說明。

附帶說明，如果您明確執行AJAX請求，還可以將更多數據附加到item對象並訪問它：

$('.searchsong').autocomplete({
    source:function(request, response) {
        $.ajax({
            url: "../includes/searchaddsong.php",
            type: "GET",
            dataType: "json",
            delay: 500,
            data: { term: request.term },
            success: function(data) {
                response($.map(data, function(item) {
                    return {
                        label: item.Title + " (" + item.Id+ ")",
                        value: item.Id,
                        id: item.Id,
                        title: item.Title,
                        image: item.Image
                    };
                }));
            }
        });
    },
    minLength:0,
    select: function(event,ui){ 
        alert("id = " + ui.item.id + "\n" +
              "title = " + ui.item.title + "\n" +
              "image = " + ui.item.image);
    }
});

Answer 2

有一個方法_renderItem 。 我希望它可以幫助您實現您描述的行為