Question

我目前正在使用动态输入自动完成功能，目前我的自动提款功能正常。

我基本上需要从JSON返回2个值。一首是该歌曲的ID，另一首是该歌曲的title。 ID是该表的主键，因此它总是不同的。

我想我可以使用键{/值来执行此操作，其中key是ID而value是title。

当用户现在点击输入字段时，它会返回字段中歌曲的ID和title。我需要做的就是将title放在字段中，然后将ID发送到我的jquery/AJAX然后发送到我的php脚本。

到目前为止，这是返回的内容。我只想在输入字段中输入标题，但需要将ID发送到php。

autocomplete example

我甚至不确定我是否正确构建了我的JSON回调以便能够执行此操作。

这是我到目前为止的顺序

JQUERY AUTOCOMPLETE

$(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。

作为旁注，您还可以将更多数据附加到item对象，并在显式执行AJAX请求时访问它：

$('.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调用中构造和返回键值对

2 个答案: