JQuery自动完成:如何处理修改?

时间:2012-06-13 16:05:24

标签: php jquery jquery-ui jquery-ui-autocomplete

我已自动完成工作,但如何处理修改?

当用户修改原始选择时会发生什么?我有一个自动完成,当选择列表时,其他字段被填入。如果用户选择列表,然后尝试将其修改为新的(与我们的数据库中的任何内容不匹配),其他字段需要清除。

另一种询问方式:如何处理“新”列表?

我的代码

$(function() {
    $( "#oName" ).autocomplete({
        source: "include/organizerList.php",
        minLength: 3,
        select: function( event, ui ) {
            $("input#oID").val(ui.item.oID);
            $("input#oCID").val(ui.item.oCID);
            $("div#organCity").text(ui.item.oCity);
            $("div#organCountry").text(ui.item.oCountry);
        }
    });
});

organizerList.php

// important to set header with charset
header('Content-Type: text/html; charset=utf-8');

$term = htmlspecialchars(strtolower($_GET["term"]));

$return = array();
    $query = mssql_query("SELECT CID, oID, oName, oCity, oCountry FROM TradeShowDB_Organizers WHERE oName LIKE '%$term%'");
    while ($row = mssql_fetch_array($query)) {
    array_push($return,array( 'oCID'=>$row['CID'], 'oID'=>$row['oID'], 'label'=>$row['oName'] . ', ' . $row['oCity'], 'value'=>$row['oName'], 'oCity'=>$row['oCity'], 'oCountry'=>$row['oCountry'] ));
}

// encode it to json format
echo(json_encode($return));

我的HTML:

<input type="text" tabindex='20' id="oName" name="oName" size="60" maxlength="200" value="<?php echo $oName; ?>">
<div id='organCity'></div>
<div id='organCountry'></div>
<input type="hidden" id="oID" name="oID" value="<?php echo $oID; ?>">
<input type="hidden" id="oCID" name="oCID" value="<?php echo $oCID; ?>">

1 个答案:

答案 0 :(得分:0)

您可以使用自动填充select事件http://jqueryui.com/demos/autocomplete/#event-select

用户选择选项

后禁用输入
$("#oName").autocomplete({
    source: "include/organizerList.php",
    minLength: 3,
    select: function (event, ui) {
        this.value = ui.item.value;
        $('#autocomplete').autocomplete("disable");
        $('#autocomplete').trigger('keypress'); //needed to fix bug with enter on chrome and IE
        $(this).attr('disabled','disabled');
        return false;
    },
    autoFocus: true
});

<强> http://jsfiddle.net/HKxua/6/

然后在服务器端脚本中,您可以检查输入以查看数据库中是否存在已发布的值。