jQuery使用自动完成限制文本框输入

Question

我正在使用 jQuery UI 的自动完成功能来尝试为表单传播正确的输入，其中包含超过 1000 个值。

自动完成功能正常，但如何将字段的值限制为这些值？

表单中的自动完成代码：

$('#animal').autocomplete({
    source: "search_species.php",
    minLength: 3,
    select: function(event, ui) {
        $('#animal').val(ui.item.postcodes);
        $('#code').val(ui.item.code);
        $('#family').val(ui.item.family);
    }
});

自动完成源代码：

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
mysql_select_db($dbname);
$return_arr = array();

if ($conn){
    $fetch = mysql_query(
        "SELECT * FROM animals where animals like '%" . mysql_real_escape_string($_GET['term']) . "%'"
    ); 

    /* Retrieve and store in array the results of the query.*/
    while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
        $row_array['id'] = $row['id'];
        $row_array['value'] = $row['animals'];
        $row_array['family'] = $row['family'];
        $row_array['code'] = $row['code'];
        array_push($return_arr,$row_array);
    }
}  

mysql_close($conn);
echo json_encode($return_arr);

正如我所说，自动完成功能有效。我只需要知道如何将文本字段中的值限制为搜索中的值，这样人们就无法输入自己的值。

提前致谢。

Answer 1

有几种方法可以解决这个问题。

一种方法是在下拉列表中未选择任何内容时清除输入值，并在提交时强制该字段为非空。清除该值的一个好方法是在菜单更改或关闭时使用自动完成事件，该事件名为change。如果选择了一个项目，或者输入失去焦点，则会触发此事件。如果用户没有从菜单中选择一个项目，那么ui.item 值将为空，您可以清除输入中留下的键入值。

你可以像这样实现这个方法：

$('#animal').autocomplete(
    {
        source: "search_species.php",
        minLength: 3,
        select: function(event, ui) {
            $('#animal').val(ui.item.postcodes);
            $('#code').val(ui.item.code);
            $('#family').val(ui.item.family);
        },
        change: function(event, ui) {
            if(ui.item === null || !ui.item)
               $(this).val(''); /* clear the value */
        }
    });  

从这里可以直接在表单验证或您正在使用的任何内容中添加一个检查，以防止用户继续前进，除非选择了一个项目——通过确保输入值不为空。