jQuery 未选中通过鼠标单击自动完成的选择。文本框仍然 post 返回输入值未在 IE 中选择的值

Question

jQuery autocomplete select用鼠标点击的离子不会在 IE 中得到 selected。 textbox（在 GridView、EditItemTamplate 内）仍然 post 返回文本框中键入的值，而不是 IE 下拉列表中的 selected 值。它在 Google 和 Firefox 中运行良好。

此代码在我的内容页面中。当我在 texbox 中键入一个字母时，autocomplete 会给我一个选项列表。如果我使用 'up' 或 'down' 箭头和 select 选项，它会正确填充我的 textbox。但是，如果我用鼠标单击选择一个选项，那么它不会用我选择的选项填充我的 textbox，它只是 post 返回我在 textbox 中键入的任何内容。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="BlindKeyVerification.aspx.cs" Inherits="Test.Administration.BlindKeyVerification" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="../Styles/jquery-ui.css" rel="stylesheet" />
    <link href="../Styles/jquery-ui.min.css" rel="stylesheet" />
    <script src="../Scripts/jquery.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>  
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">       

    $(document).ready(function () {

        $("[id*=txtGridCode]").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("/Administration/priceCodeService.asmx/getPriceCodeArray") %>',
                    data: "{ 'priceCode': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",                        
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {

                                label: item,                                    
                                val: item.split('-')[0]
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }

                });
            },

            minLength: 1
        });

        $("[id*=txtGridCode]").autocomplete({
            select: function (event, ui) {
                $this = $(this);
                setTimeout(function () {
                    $("[id*=txtGridCode]").val(ui.item.val);                       
                }, 1);
            }
        });

    });

    function InitializeRequest(sender, args) {
        $("*").css("cursor", "wait");
    }

    function EndRequest(sender, args) {
        $("*").css('cursor', 'auto');
    }

    function stopRKey(evt) {
        var evt = (evt) ? evt : ((event) ? event : null);
        var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
        //if ((evt.keyCode == 13) && (node.type == "text")) { return false; } //Stop return Key from Posting the page
        if ((evt.keyCode == 8) && (node.type == "select-one")) { return false; } //dropdown box backspace stop backpage
    }
    document.onkeypress = stopRKey; //Firefox
    document.onkeydown = stopRKey; //i.e.
</script>

textbox里面的部分GridView:

BlinkKeyVerfication.aspx

<asp:GridView ID="GridView1" runat="server">
    <Columns>
        <asp:TemplateField HeaderText="Code">
            <ItemTemplate>
                <asp:Label ID="lblCode" runat="server" ForeColor="Red" Font-Size="Smaller">
                </asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txtGridCode" runat="server" OnTextChanged="txtGridCode_TextChanged" AutoPostBack="true"></asp:TextBox>
            </EditItemTemplate>
            <ItemStyle Font-Size="Smaller" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

priceCodeService.asmx.cs

public partial class WebForm1 : System.Web.UI.Page
{

    public List<string> getPriceCodeArray(string priceCode)
    {
        List<string> doc = new List<string>();
        string CSConn = "Server=CourtData;Initial Catalog= CourtSupport; Integrated Security = SSPI";
        using (SqlConnection conn = new SqlConnection(CSConn))
        {
            using (SqlCommand comm = new SqlCommand("SELECT  priceCode, priceText FROM tblpriceCodeExtract WHERE priceCode like @priceCode + '%'", conn))
            {
                SqlParameter parameter_code = new SqlParameter();
                parameter_code.ParameterName = "@priceCode";
                parameter_code.Value = priceCode;
                comm.Parameters.Add(parameter_code);
                conn.Open();
                SqlDataReader rdr = comm.ExecuteReader();
                while (rdr.Read())
                {
                    //string doccode = rdr["priceCode"].ToString();
                    //string codetext = rdr["priceText"].ToString();
                    //if (codetext.Length > 30)
                    //    codetext = codetext.Substring(0, 29) + "...";
                    //doc.Add(string.Format("{0}-{1}", doccode, codetext));
                    doc.Add(rdr["priceCode"].ToString());

                }
            }
        }
        return doc;
    }
}

Answer 1

由于兼容性视图，我的代码无法正常工作，我们的站点处于兼容性视图中。

在我的 aspx 内容页面标题部分，我有以下代码，但它没有任何用处，因为我的主页代码阻止了它

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

然后我从内容页面中删除了该代码，并在我的 .cs 文件中添加了以下代码

 protected void Page_Load(object sender, EventArgs e)
        {
            if (Header.Controls[1].GetType() != typeof(System.Web.UI.HtmlControls.HtmlMeta))
            {
                System.Web.UI.HtmlControls.HtmlMeta meta = new System.Web.UI.HtmlControls.HtmlMeta();
                meta.HttpEquiv = "X-UA-Compatible";
                meta.Content = "IE=edge";
                this.Header.Controls.AddAt(1, meta);
            }

现在我的代码在所有浏览器中都能正常工作。现在我的代码中不再需要 select 事件。所以我删除了它。

jQuery 未选中通过鼠标单击自动完成的选择。文本框仍然 post 返回输入值未在 IE 中选择的值

jQuery autocomplete selection with mouse click doesn't get selected. the textbox still post back with typed value not selected value in IE

c#

asp.net

internet-explorer

jquery-autocomplete

content-pages