Question

我使用以下方法进行自动完成工作。我输入并返回我正在搜索的个人的用户名，如果我愿意，它还会显示用户的ID。但是，我要求的是FIRST和LAST NAME在输入框中显示，但是在提交表单时要传递的实际值（ID）。那么如何将输入类型的值作为ID，但将下拉列表显示为姓名？

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

Answer 1

这样的事情会起作用吗？

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>

Answer 2

您可以使用HTML5的数据列表，如下所示。

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

根据您的要求生成datalist选项FirstName + LastName就是您的情况。

jQuery自动完成 - 传递值而不是名称

2 个答案: