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

Question

I am currently using Autocomplete with dynamic inputs, currently my Autocomplete works fine.

I basically need to return 2 values back from JSON. One is the ID of the song and the other is the title of that song. The ID is the primary key of that table so it will always be different.

I figure I can do this with a key/value where the key is the ID and the value is the title.

When the user clicks on the input field right now it returns both the ID and title of the song in the field. What I need to be able to do is just put the title in the field and be able to send off the ID to my jquery/AJAX then to my php script.

This is what is being returned so far. I just want the title in the input field but need the ID to send off to php.

autocomplete example

I am not even sure if I am structuring my JSON call back correctly to be able to do this.

This is what I have so far in order

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

UPDATE: Edited this searchaddsong.php I think I figured this out

<?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'];
?>

Jason · Accepted Answer · 2015-04-06 15:31:11Z

4

You can access these values from the ui parameter on the select option.

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

A more detailed description of this feature is found in the documentation.

As a side note, you can also attach more data to the item object and access it if you explicitly perform the AJAX request:

$('.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);
    }
});

edited Apr 6, 2015 at 15:31

answered Apr 3, 2015 at 20:52

Jason

5273 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cesar Bielich Over a year ago

this is returning the value for both. So the alert is coming back as title:title. The ID is not showing up

Cesar Bielich Over a year ago

Would this be a proper JSON response to work with that? {"16":"Song One","4":"Song Two","6":"Song Three","7":"Song Four"}

Jason Over a year ago

Yes, that is the correct format. I added a relevant link to the documentation that describes the label and value fields.

Oleks · Accepted Answer · 2015-04-03 20:56:06Z

0

There is a method _renderItem. I hope it will help you to implement behaviour which you've described

answered Apr 3, 2015 at 20:56

Oleks

1,6411 gold badge18 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related