jQuery Autocomplete - Passing Value Instead of Name

Question

I have an automcomplete working using the method below. I type in and it returns the user name of the individual I am searching for and it also shows me the ID of the user if I want to. However, what I require is for the FIRST and LAST NAME to show in the input box but the actual value (ID) to be passed when the form is submitted. So how to I get the value of the input type to be the ID but show the drop down as first and last name?

HTML

<input type='search' id='nameSearch' placeholder='Search User' />

SCRIPT

<script>
$(document).ready(function(){

$('#nameSearch').autocomplete({

    source:'results.php', 
    minLength:1,
    select: function(event, ui){

        // just in case you want to see the ID
        var accountVal = ui.item.value;
        console.log(accountVal);

        // now set the label in the textbox
        var accountText = ui.item.label;
        $('#nameSearch').val(accountText);

        return false;
    },
        focus: function( event, ui ) {
        // this is to prevent showing an ID in the textbox instead of name 
        // when the user tries to select using the up/down arrow of his keyboard
        $( "#nameSearch" ).val( ui.item.label );
        return false;  
    },  

 });

 });
 </script>

SQL

include "libs/db_connect.php";

// get the search term
$search_term = isset($_REQUEST['term']) ? $_REQUEST['term'] : "";

// write your query to search for data
$query = "SELECT 
        ID, NAME, LAST_NAME
    FROM 
        b_user 
    WHERE 
        NAME LIKE \"%{$search_term}%\" OR 
        LAST_NAME LIKE \"%{$search_term}%\" 
    LIMIT 0,10";

$stmt = $con->prepare( $query );
$stmt->execute();

// get the number of records returned
$num = $stmt->rowCount();

if($num>0){ 

// this array will become JSON later
$data = array();

// loop through the returned data
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    extract($row);

    $data[] = array(
        'label' => $NAME . " " . $LAST_NAME,
        'value' => $ID
    );
}

// convert the array to JSON
echo json_encode($data);

}

//if no records found, display nothing
else{
die();
}

There are several ways but no magic here. You're going to have to use a separate field, hidden or something, to store the ID. — WhiteHat
– WhiteHat, Commented Aug 4, 2015 at 14:39
Hmm if I were to show it in a hidden field, how would I do it based on the selected value. Bearing in mind I am going to be having multiple of these fields called name="nominee[]" — andy
– andy, Commented Aug 4, 2015 at 14:41
sorry, I don't quite understand the question, but you could have two inputs for each. One for display purposes, the other to submit. <input type="search" name="nameSearch"> and <input type="hidden" name="nameSearchID"> — WhiteHat
– WhiteHat, Commented Aug 4, 2015 at 14:52

WhiteHat · Accepted Answer · 2015-08-04 15:05:51Z

1

Would something like this work?

HTML

<input type='search' id='nameSearch' placeholder='Search User' />
<input type='hidden' id='nameSearchID' />

SCRIPT

<script>
$(document).ready(function(){

$('#nameSearch').autocomplete({

    source:'results.php', 
    minLength:1,
    select: function(event, ui){

        // set the value of the ID
        var accountVal = ui.item.value;
        $('#nameSearchID').val(accountVal);

        // now set the label in the textbox
        var accountText = ui.item.label;
        $('#nameSearch').val(accountText);

        return false;
    },
        focus: function( event, ui ) {
        // this is to prevent showing an ID in the textbox instead of name 
        // when the user tries to select using the up/down arrow of his keyboard
        $('#nameSearch').val( ui.item.label );
        $('#nameSearchID').val( ui.item.value );
        return false;  
    },  

 });

 });
 </script>

answered Aug 4, 2015 at 15:05

WhiteHat

61.3k7 gold badges54 silver badges140 bronze badges

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

1 Comment

andy Over a year ago

I tried this from your comments and it worked a treat! Thank you :-)

Akshay · Accepted Answer · 2015-08-04 15:08:52Z

0

You can use data list of HTML5 as follows.

<input type="text" id="txtSearch" list="test" />
<datalist id="test">
        <option>Value 1</option>
        <option>Value 2</option>
</datalist>

Generate options of datalist based on your requirement FirstName + LastName is your case.

answered Aug 4, 2015 at 15:08

Akshay

5407 silver badges20 bronze badges

2 Comments

andy Over a year ago

That is not the way to do it from what I have specified above.

Akshay Over a year ago

This is the simplest way to do without any external js

Collectives™ on Stack Overflow

jQuery Autocomplete - Passing Value Instead of Name

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related