ajax jquery自动填充文本框不会在选择弹出列表时回发 [英] ajax jquery autocomplete textbox doesn't post back on selecting popup lists

问题描述

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
type = "text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type = "text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel = "Stylesheet" type="text/css" />
<script type="text/javascript"> 
   // if you use jQuery, you can load them when dom is read.
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init of the autocomplete
       InitAutoCompl();
    });        

    function InitializeRequest(sender, args) {
    }

    function EndRequest(sender, args) {
       // after update occur on UpdatePanel re-init the Autocomplete
       InitAutoCompl();
    }

   function InitAutoCompl() {
       $("#txtSearch").autocomplete({
           source: function (request, response) {
               $.ajax({
                   url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
                   data: "{ 'prefix': '" + request.term + "'}",
                   dataType: "json",
                   type: "POST",
                   contentType: "application/json; charset=utf-8",
                   multiple: true,
                   width: 400,
                   minChars: 2,
                   cacheLength: 1,
                   multipleSeparator: " ",
                   success: function (data) {
                       response($.map(data.d, function (item) {

                           return {
                               label: item.split('-')[0],
                               val: item.split('-')[1]
                           }
                       }))
                   },
                   error: function (response) {
                       alert(response.responseText);
                   },
                   failure: function (response) {
                       alert(response.responseText);
                   }
               });
           },
           select: function (e, i) {
               $("#<%=hfCustomerId.ClientID %>").val(i.item.val);
               var origEvent = event;
               while (origEvent.originalEvent !== undefined)
                   origEvent = origEvent.originalEvent;
               if (origEvent.type == 'keydown')
                   $("#bttnSearch").click();
               return true;  

           },

           minLength: 1
       });
      
  }    
  </script>

这是我到现在为止所得到的。我的问题是什么？

1）当我使用键盘导航键将鼠标悬停在弹出列表上时，它会在文本框中显示项目，但是当我使用鼠标时，它不会显示在文本框中。（？） 。

2）当我选择列表项时，它会在文本框中被选中，但不会触发文本框textchange事件。（？）。





我的aspx

this is what i got till now. What is my problem is
1) when i hover over the popup lists using keyboard navigation key it displays items in text box, but when I use mouse it doesn''t display in textbox.(?).
2) when i select the list item it gets selected in text box but does not fire text box textchange event.(?).


my aspx

<asp:UpdatePanel ID="up" runat="server"><contenttemplate>
     <asp:HiddenField ID="hfCustomerId" runat="server" />
<asp:Label ID="lblEmpCodeSrch" runat="server" Text="EmpCode" CssClass="label">   
 
  <asp:TextBox ID="txtSearch" runat="server" Width="815px" ToolTip="Enter Employeecode" 

            ontextchanged="txtSearch_TextChanged">
     <asp:Button ID="bttnSearch" runat="server" CssClass="submit" Height="23px" Text="Search" onclick="bttnSearch_Click" />
 </contenttemplate>

这里我试图正确解释我的问题。任何帮助表示感谢。

Here I tried to explain my question properly. Any help appreciated.

推荐答案

（ document ）。ready（ function （）{
var prm = Sys.WebForms.PageRequestManager.getInstance（）;
prm.add_initializeRequest（InitializeRequest） ;
prm.add_endRequest（EndRequest）;

// 此处放置第一个初始化自动完成
InitAutoCompl（）;
}）;

function InitializeRequest（sender，args）{
}

函数 EndRequest（sender，args）{
// 重新启动自动完成
InitAutoCompl（）;
}

function InitAutoCompl（）{

(document).ready(function () { var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(InitializeRequest); prm.add_endRequest(EndRequest); // Place here the first init of the autocomplete InitAutoCompl(); }); function InitializeRequest(sender, args) { } function EndRequest(sender, args) { // after update occur on UpdatePanel re-init the Autocomplete InitAutoCompl(); } function InitAutoCompl() {

（ #txtSearch）。autocomplete（{
source： function （请求，响应）{

("#txtSearch").autocomplete({ source: function (request, response) {

.ajax（{
url：' <％= ResolveUrl（〜/ Service.asmx / GetCustomers）％>'，
data： {'prefix'：' + request.term + '}，
dataType： json，
类型： POST，
contentType： a pplication / JSON; charset = utf-8，
倍数： true ，
宽度： 400 ，
minChars： 2 ，
cacheLength： 1 ，
multipleSeparator： ，
成功： function （data）{
response（

.ajax({ url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>', data: "{ 'prefix': '" + request.term + "'}", dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", multiple: true, width: 400, minChars: 2, cacheLength: 1, multipleSeparator: " ", success: function (data) { response(

这篇关于ajax jquery自动填充文本框不会在选择弹出列表时回发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！