CODEWITHSUNDEEP
javascriptjquery
andy
andy

Reputation: 459

jQuery Autocomplete - Passing Value Instead of Name

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

Upvotes: 0

Views: 111

Answers (2)

Akshay
Akshay

Reputation: 540

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.

Upvotes: 0

WhiteHat
WhiteHat

Reputation: 61222

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>

Upvotes: 1

Related Questions