3

我正在使用 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);

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

提前致谢。

4

1 回答 1

2

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

一种方法是如果没有从下拉列表中选择任何内容，则清除输入值，并在提交时强制该字段为非空。清除该值的一个好方法是在菜单更改或关闭时使用自动完成事件，该事件名为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 */
        }
    });

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

于 2013-03-15T02:08:28.803 回答