如何使用自动完成从 JSON 调用构建和 return 键值对

Question

我目前正在使用带有动态输入的自动完成，目前我的自动完成工作正常。

我基本上需要从 JSON 返回 return 2 个值。一个是歌曲的ID，另一个是那首歌的title。 ID 是那个 table 的主键，所以它总是不同的。

我想我可以用 key/value 来做到这一点，其中 key 是 ID 而 value 是 title.

当用户现在单击输入字段时，它 return 字段中歌曲的 ID 和 title 都是。我需要做的只是将 title 放在字段中，然后能够将 ID 发送到我的 jquery/AJAX，然后发送到我的 php 脚本。

这就是目前正在 return 编辑的内容。我只想要输入字段中的标题，但需要 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);
    }
});

已找到此功能的更详细说明 in the documentation。

附带说明一下，如果您显式执行 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。我希望它能帮助您实现您所描述的行为

如何使用自动完成从 JSON 调用构建和 return 键值对

How to structure and return key value pair from a JSON call with Autocomplete

jquery

json

jquery-autocomplete