2015-08-11 2 views
3

Здесь я пытаюсь использовать jquery auto complete в asp.net, я пытаюсь извлечь данные из источника данных sql и использовать это для автоматической выборки. в то время как я выполняю автоматический запуск кода, не работал.Auto complete in asp.net с помощью jquery

мой код

<script src="jquery.min.js" type="text/javascript"></script> 
    <script src="jquery-ui.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      SearchText(); 
     }); 
     function SearchText() { 
      $(".autosuggest").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         type: "POST", 
         contentType: "application/json; charset=utf-8", 
         url: "Inventory.aspx/GetAutoCompleteData", 
         data: "{'username':'" + document.getElementById('txtPartno').value + "'}", 
         dataType: "json", 
         success: function (data) { 
          response(data.d); 
         }, 
         error: function (result) { 
          alert("Error"); 
         } 
        }); 
       } 
      }); 
     } 
</script> 

текстовое поле

<asp:TextBox ID="txtPartno" CssClass="Textboxbase" class="autosuggest" runat="server"></asp:TextBox> 

и мой C# код

protected void Page_Load(object sender, EventArgs e) 
{ 

} 
[WebMethod] 

public static List<string> GetAutoCompleteData(string username) 
{ 
    List<string> result = new List<string>(); 
    using (SqlConnection con = new SqlConnection("Data Source=MYPC-GN\\KASPLDB;Integrated Security=False;User ID=sa;Password=*****;Connect Timeout=15;Encrypt=False;TrustServerCertificate=False")) 
    { 
     using (SqlCommand cmd = new SqlCommand("select DISTINCT PART_NO from Inventory where UserName LIKE '%'[email protected]+'%'", con)) 
     { 
      con.Open(); 
      cmd.Parameters.AddWithValue("@SearchText", username); 
      SqlDataReader dr = cmd.ExecuteReader(); 
      while (dr.Read()) 
      { 
       result.Add(dr["UserName"].ToString()); 
      } 
      return result; 
     } 
    } 
} 
+0

Что ошибка вы получаете? – Karthik

+0

нет ошибок, но они не извлекают данные, как ожидалось. – RJ10

+0

Удаляет ли ваш 'GetAutoCompleteData'? –

ответ

0

Одна проблема, которую я могу видеть ваш Javascript вызов немного неправильно. Вы не можете получить значение текстового поля, которое создается самим asp с помощью document.getElementById('txtPartNo'). Чтобы получить это значение, вы должны получить его идентификатор клиента, который вы можете получить using- txtPartNo.ClientID так в конце концов это будет become-

data: "{'username':'" + document.getElementById('<%= txtPartno.ClientID %>').value + "'}", 

Если вы не попробовать этот способ, то вы не получите фактическое значение этого текстового поля и undefined будут отправлены методу C#, который ничего не вернет.

+0

Пробовал чувак, все еще не получил данные ,,, – RJ10

+0

Можете ли вы добавить атрибут, который является' ScriptMethod (ResponseFormat = ResponseFormat.Json) '? – Abhinav

0

Сначала вы должны проверить, вызвана ли функция JavaScript. Если он вызван, вы должны проверить правильность URL-адреса. Вы можете проверить инструменты разработчика/firebug и т. Д., Чтобы узнать, какой запрос вы отправляете.

0

я следующим образом:

ajaxCallSetting.js

var ajaxCallSetting = function (element, message, req) { 
 
    var baseInfo = {   
 
     baseUrl: "http://localhost:10266/" 
 
    }; 
 
    var buildUrl= function() { 
 
     return baseInfo.baseUrl + message; 
 
    }; 
 

 
    var callApi = function(request, response) { 
 
     $.ajax({ 
 
      type: "POST", 
 
      contentType: "application/json; charset=utf-8", 
 
      url: buildUrl(), 
 
      data: JSON.stringify(req), 
 
      dataType: "json" 
 
     }).success(function(data) { 
 
      response(data.d); 
 
     }); 
 
    }; 
 
    
 
    return { 
 
     init: function() { 
 
      $(element).autocomplete({ 
 
       source: callApi 
 
      }); 
 
     } 
 
    }; 
 
};

Глава тег:

<head> 
 
    <title></title> 
 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script> 
 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> 
 
    <script src="ajaxCallSetting.js"></script> 
 
    <link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" /> 
 
    <script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      var req = { 
 
       username: $('#txtPartno').val() 
 
      }; 
 
      apiSettings('#txtPartno', "Default.aspx/GetAutoCompleteData", req).init(); 
 
     }); 
 
    </script> 
 
</head>

Насколько возможно, Ведение отдельного кода Html с кодом в JavaScript является полезным.

0

Я не думаю, что ваш TextBox подключен правильно. Попробуйте это:

<asp:TextBox ID="txtPartno" CssClass="Textboxbase autosuggest" runat="server"></asp:TextBox> 

И попробовать это в JavaScript:

$(".autosuggest").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "Inventory.aspx/GetAutoCompleteData", 
        data: "{'username':'" + request.term + "'}", 
        dataType: "json", 
        success: function (data) { 
         response(data.d); 
        }, 
        error: function (result) { 
         alert("Error"); 
        } 
       }); 
      } 
     });