Question

我正在使用jQuery UI的自动完成功能尝试传播表单的正确输入，超过1000个vaules。

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

自动填写表单中的代码：

$('#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 */
        }
    });

从这里可以直接在表单验证中添加一个检查，或者无论你使用什么，都可以防止用户继续前进，除非选择了一个项目 - 确保输入值非空。

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

1 个答案: