CODEWITHSUNDEEP
phpjquerymysqlautocomplete
jonjon
jonjon

Reputation: 121

Setting up multiple key and values for an array

I have a small code snippet below. I'm using jQueryUI's autocomplete function to pull data from my mySql data base and populate a user name into search bar when someone searches for a specific user. I want it to autocomplete the first and last name of the person being searched for. For example, if the autocomplete function predicts that someone is looking for Lebron James, I want it to return both the first and last name. Currently, I can only get it to return the first name. From looking at the documentation, I thought I could add multiple key and value pairs by putting them one after another. This only produces one name for me. I added a "2" after the second label/value pair names to see if giving them different names would help. It still only returns the first name and not the last name. How can I get it to return both the first and last name in my autocomplete?

my index.php

<?php


// here we set the database information
$SERVER = 'localhost';
$USER = 'user';
$PASS = 'password';
$DATABASE = 'database';

// we are instantiating the mysqli database object
$db = new mysqli($SERVER, $USER, $PASS, $DATABASE);

// error check
if($db->connect_errno > 0){

      // report an error
die('Unable to connect to database [' . $db->connect_error . ']');
}



$sql = 'SELECT * FROM users WHERE user LIKE "' . $_REQUEST['term'] . '%"';


$result = $db->query($sql);

$data = array();

    while ($row = $result->fetch_assoc()) 
    {
        $data[] = array(
            'label' => $row['firstName'] ,
            'value' => $row['lastName'],
            'label2' => $row['lastName'],
            'value2' => $row['lastName'],

        );
    }


// jQuery wants JSON data
echo json_encode($data);
flush();

my html and js

<form id="searchbox" action="">
    <input id="search" type="text" placeholder="Search">
    <!--<input id="submit" type="submit" value="Search">-->
</form> 


<script type="text/javascript" >

//script for autocompleting usernames when being search
$('#search').autocomplete(
    {source:'autosuggest.php',
     minLength:2
     });

</script>

Upvotes: 0

Views: 95

Answers (1)

Darren
Darren

Reputation: 13128

Taken straight from the API documents:

Multiple types supported: Array: An array can be used for local data. There are two supported formats: An array of strings: [ "Choice1", "Choice2" ] An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

They want you to supply the information as such:

[
{'label': 'label', 'value': 'value'},
{'label': 'label', 'value': 'value'},
{'label': 'label', 'value': 'value'}
....etc
]

And you're supplying it like this:

[
{'label': 'label', 'value': 'value', 'label1': 'label1', 'value1': 'value1'}
....etc
]

I myself have not used this part of jQuery UI so I can't comment on that, however I could suggest you parsing the full name as such: firstname_lastname in the label and then possibly harnessing split() to show the full name.

Alternatively, you could pass the label through your php file as such:

while ($row = $result->fetch_assoc()) 
{
    $data[] = array(
        'label' => $row['firstName'] . ' '. $row['lastName'],
        'value' => $row['firstName'] . ' '. $row['lastName'],
    );
}

Upvotes: 1

Related Questions