jQuery Autocomplete using json data

Question

I have been banging my head against the wall for hours on this, and I can't seem to figure it out. I have a php file that gets data from a table and converts it into json and displays it like so:

{"id":1,"name":"GR Gas","number":"1","gas":"0.02500000","diesel":"0.03500000"}

I have the jQuery UI Autocomplete plugin on another php web page that has this jQuery written:

        $(function () {

            $("#customers").autocomplete({
                source: "../assets/json_clients.php",
                dataType: 'json',
                minLength: 2,
                select: function (event, ui) {
                    $("customer-id").val(ui.item.number);
                }
            });
        });

So far it does it's job, it reads the json, and creates the autocomplete drop down under the textbox and i can click on the item. However it is displaying everything in that dropdown that the json outputs, for example it has GR Gas, 1, etc. I only want it do display the "name". When it is clicked it sets the values of hidden text boxes, can someone point me in the right direction?

Thank you in advance for your help!

EDIT Here is the PHP that creates the json:

<?php

header('Content-Type: application/json');
require 'class_dbconnection.php';

$sql = 'SELECT id,c_name,c_number,price_gas,price_distillate FROM mb_clients';

foreach ($Conn->query($sql) as $row) {
    $result = array('id' => $row['id'], 'name' => $row['c_name'], 'number' => $row['c_number'], 'gas' => $row['price_gas'], 'diesel' => $row['price_distillate']);
    echo json_encode($result, JSON_FORCE_OBJECT);
}

You can add user attributes for name or other values as needed to the element and read on click of value the way you want see here how. — iphonic
– iphonic, Commented Mar 24, 2017 at 15:54
Also, maybe this is a typo $("customer-id").val(ui.item.number); — Hackerman
– Hackerman, Commented Mar 24, 2017 at 15:55
$("#customer-id").val(ui.item.number); My guess you are not using the pound sign for your id in your JQuery selector. — DeadlyChambers
– DeadlyChambers, Commented Mar 24, 2017 at 15:59
i added the pound sign, good spot. but it didn't fix the issue of not setting the value. — Geoffrey
– Geoffrey, Commented Mar 24, 2017 at 16:04

Martina · Accepted Answer · 2017-03-24 19:21:15Z

1

You can use the 'source' option as a function, do your ajax there and manipulate the data returned, read the 3 options for source, you need to return string, array in expected format or use it as function:

http://api.jqueryui.com/autocomplete/#option-source

It may also work if you add 'label' to your JSON, but then you don't have space to manipulate anything else.

Here is an example of using it as function:

source: function(request, response)
{
  var searchTerm = request.term; // This will be the search term

$.ajax({ 
    url: url,
    data: request, // if request does not work with your php, try request.term
    success: function(json)
    {

        var arr = [ { label: "Choice1", value: "value1" }, ... ]
        response(arr); 
    },
    error:function(errObj)
    {
        var arr = []; 
        response(arr);
    }
    });
},

Also have a look at: http://api.jqueryui.com/autocomplete/#event-response

You don't even need to use 'source' it seems.

edited Mar 24, 2017 at 19:21

answered Mar 24, 2017 at 16:01

Martina

7694 silver badges13 bronze badges

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

3 Comments

Geoffrey Over a year ago

I looked at doing this also, but i couldn't figure out how to get it into the php array so it "worked" . I feel like if i could get my json in the correct format this would be soo much easier.

Martina Over a year ago

Try the code I added, you can loop through your json and build the label + value array of objects and return it or look at the response option too.

Martina Over a year ago

If you're worried about how to pass the search term to the php, just send it in postData, have you tried that? I'll update my ajax in the example to show how. This is a good example too: jqueryui.com/autocomplete/#remote-with-cache

Collectives™ on Stack Overflow

jQuery Autocomplete using json data

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related