自动完成以避免文本框的选项卡操作

时间:2018-12-14 17:38:38

标签: javascript autocomplete

我正在使用自动填充来显示来自数据库的位置列表。用户按预期方式获得列表。但是从列表用户中选择状态,只需单击选项卡按钮并控制转到下一个按钮。我想在这里避免TAB操作。任何建议我将如何做。 这是我的功能:

  $(document).ready(function () {
        src = 'LocationHandler.ashx';

        $('#txtLocationName').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: src,
                    dataType: "json",
                    data: {
                        term: request.term,
                        type: $("#ddlDivision1").val()
                    },
                    success: function (data) {
                        Object.keys = Object.keys || function (o, k, r) { r = []; for (k in o) r.hasOwnProperty.call(o, k) && r.push(k); return r }
                           if (Object.keys(data).length == 0) {
                            $('#txtLocationName').val('');
                            alert('Location must be selected from the options.');
                        }

                        response(data);
 }
                    });
            },
                min_length: 3,
            delay: 300
        });
        });

我的Handler类看起来像

public class LocationHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string term = context.Request["term"] ?? "";
      string type = context.Request["type"] ?? "";
    //  type = "FM";
        List<string> listLocationNames = new List<string>();
        string cs = ConfigurationManager.ConnectionStrings["EGLFormsDB"].ConnectionString;
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("spIARLocationNames", con);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.Add(new SqlParameter()
            {
                ParameterName = "@term",
                Value = term
            });
             cmd.Parameters.Add(new SqlParameter()
            {
                ParameterName = "@locType",
                Value = type
            });
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                listLocationNames.Add(rdr["Name"].ToString());
            }
        }

        JavaScriptSerializer js = new JavaScriptSerializer();
        context.Response.Write(js.Serialize(listLocationNames));
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

1 个答案:

答案 0 :(得分:0)

这就是我解决这个问题的方式。

 $("#txtLocationName").keydown(function (evt) {
            var keyCode = evt.keyCode || evt.which;
            if (keyCode == 9) {
                //evt.preventDefault();
                //alert("TAB not allowed111111. Please select business unit number or name  from  Search box. ");
                var textloc = $("#txtLocationName").val();
                var specialChars = "{"

                if (textloc.indexOf("{") >= 0) {
                    //no need to do anything
                }
                else {
                    evt.preventDefault();
                    alert("TAB not allowed. Please select business unit number or name  from  Search box. ");
                }

            }

            if (evt.key === "Tab")

            {
              var textloc = $("#txtLocationName").val();
                var specialChars = "{"

                if (textloc.indexOf("{") >= 0) {
                    //no need to do anything
                }
                else {
                    evt.preventDefault();
                    alert("TAB not allowed. Please select business unit number or name  from  Search box. ");
                }

            }
               });