[JQUERY] JQuery와 UI 자동 완성에 기능 () ... 그리고 AJAX : 소스를 사용하는 방법

JQuery와 UI 자동 완성에 기능 () ... 그리고 AJAX : 소스를 사용하는 방법

해결법

1. ---

   1.당신의 AJAX 콜백 내부는 응답 함수를 호출 할 필요가; 디스플레이 아이템을 포함하는 배열을 전달.

   당신의 AJAX 콜백 내부는 응답 함수를 호출 할 필요가; 디스플레이 아이템을 포함하는 배열을 전달.

   jQuery("input.suggest-user").autocomplete({
       source: function (request, response) {
           jQuery.get("usernames.action", {
               query: request.term
           }, function (data) {
               // assuming data is a JavaScript array such as
               // ["one@abc.de", "onf@abc.de","ong@abc.de"]
               // and not a string
               response(data);
           });
       },
       minLength: 3
   });
   

   응답 JSON jQuery를 UI 자동 완성에서 허용하는 형식과 일치하지 않는 경우에 당신은 응답 콜백에 전달하기 전에 AJAX 콜백 내에서 결과를 변환해야합니다. 이 질문에 허용 대답을 참조하십시오.

2. ---

   2.이 코드를 사용해보십시오. 당신은 $ 아약스의 갔지 대신 $를 사용할 수 있습니다

   이 코드를 사용해보십시오. 당신은 $ 아약스의 갔지 대신 $를 사용할 수 있습니다

   $( "input.suggest-user" ).autocomplete({
       source: function( request, response ) {
           $.ajax({
               dataType: "json",
               type : 'Get',
               url: 'yourURL',
               success: function(data) {
                   $('input.suggest-user').removeClass('ui-autocomplete-loading');  
                   // hide loading image
   
                   response( $.map( data, function(item) {
                       // your operation on data
                   }));
               },
               error: function(data) {
                   $('input.suggest-user').removeClass('ui-autocomplete-loading');  
               }
           });
       },
       minLength: 3,
       open: function() {},
       close: function() {},
       focus: function(event,ui) {},
       select: function(event, ui) {}
   });
   

3. ---

   3.

   $("#id").autocomplete(
   {
       search: function () {},
       source: function (request, response)
       {
           $.ajax(
           {
               url: ,
               dataType: "json",
               data:
               {
                   term: request.term,
               },
               success: function (data)
               {
                   response(data);
               }
           });
       },
       minLength: 2,
       select: function (event, ui)
       {
           var test = ui.item ? ui.item.id : 0;
           if (test > 0)
           {
              alert(test);
           }
       }
   });
   

4. ---

   4.이것은 완전히 샘플 AJAX 호출로 새로운 작업 코드입니다.

   이것은 완전히 샘플 AJAX 호출로 새로운 작업 코드입니다.

   <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
   
   <div>
       <div id="project-label">Select a project (type "j" for a start):</div>
       <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="" />
       <input id="project" />
       <input type="hidden" id="project-i" />
   </div>
   
   
   @*Auto Complete*@
   <script>
       $(function () {
   
           $("#project").autocomplete({
               minLength: 0,
               source : function( request, response ) {
                   $.ajax({
                       url: "http://jsonplaceholder.typicode.com/posts/1/comments",
                       dataType: "jsonp",
                       data: {
                           q: request.term
                       },
                       success: function (data) {
                           response( data );
                       }
                   });
               },
               focus: function (event, ui) {
                   $("#project").val(ui.item.label);
                   return false;
               },
               select: function (event, ui) {
                   $("#project").val(ui.item.name);
                   $("#project-id").val(ui.item.email);                    
   
                   return false;
               }
           })
               .data("ui-autocomplete")._renderItem = function (ul, item) {
                   return $("<li>")
                       .data("ui-autocomplete-item", item)
                       .append("<a> " + item.name + "<br>" + item.email + "</a>")
                       .appendTo(ul);
               };
       });
   </script>
   

5. ---

   5..aspx 페이지에서 :

   .aspx 페이지에서 :

     <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head id="Head1" runat="server">
           <title>AutoComplete Box with jQuery</title>
           <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
           <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
           <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></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: "Default.aspx/GetAutoCompleteData",
                               data: "{'username':'" + document.getElementById('txtSearch').value + "'}",
                               dataType: "json",
                               success: function (data) {
                                   if (data != null) {
   
                                       response(data.d);
                                   }
                               },
                               error: function(result) {
                                   alert("Error");
                               }
                           });
                       }
                   });
               }
           </script>
     </head>
     <body>
         <form id="form1" runat="server">
             <div class="demo">
              <div class="ui-widget">
               <label for="tbAuto">Enter UserName: </label>
          <input type="text" id="txtSearch" class="autosuggest" />
       </div>
           </form>
       </body>
       </html>    
   

   당신의 .ASPX.CS에서 코드 숨김 파일 :

   using System;
   using System.Collections.Generic;
   using System.Data.SqlClient;
   using System.Web.Services;
   using System.Data;
   
   public partial class _Default : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {
       }
   
       [WebMethod]
       public static List<string> GetAutoCompleteData(string username)
       {
           List<string> result = new List<string>();
               SqlConnection con = new SqlConnection("Data Source=YourDatasource;Initial Catalog=DatabseName;uid=sa;password=123");
   
               SqlCommand cmd = new SqlCommand("select DISTINCT Name from Address where Name LIKE '%'+@Name+'%'", con);
               con.Open();
                   cmd.Parameters.AddWithValue("@Name", username);
                   SqlDataReader dr = cmd.ExecuteReader();
   
                   while (dr.Read())
                   {
                       result.Add(dr["Name"].ToString());
                   }
                   return result;
           }
   }
   

6. ---

   6.자동 완성 설정 :

   자동 완성 설정 :

   $("#searchBox").autocomplete({
       source: queryDB
   });
   

   데이터를 가져 소스 기능 :

   function queryDB(request, response) {
       var query = request.term;
       var data = getDataFromDB(query);
       response(data); //puts the results on the UI
   }
   

7. ---

   7.때 당신에 대해 물어 :

   때 당신에 대해 물어 :

   당신은 객체의 배열을지도 방법이 있다고합니다 :

   response([{label: 'result_name', value: 'result_id'},]);
   

   당신이 자동 완성 플러그인의 선택 이벤트를 사용하는 방법, 당신은 결과 울부 짖는 소리를 볼 수 있습니다;

   당신은 선택 이벤트 방법이 사용할 수 있습니다 :

   jQuery("#field").autocomplete({
         source: function (request, response) {
   
         },
         minLength: 3,
         select: function(event, ui)
         {
           console.log(ui);
         }
     });
   

   나는 그것이 도움이 답을 보완 할 수 있기를 바랍니다.

8. ---

   8.

   $("#subject_name").autocomplete({
     source: function(request, response) {
       $.ajax({
         url: "api/listBasicsubject",
         dataType: "json",
         type: "post",
         data: {
           search: request.term
         },
         success: function(data) {
   
           if (!data.length) {
             var result = [{
               label: 'Subject not found',
               value: response.term
             }];
             response(result);
           } else {
             //response(data.data);
             response($.map(data.data, function(item) {
               return {
                 label: item.subject_name,
                 value: item.subject_id
               }
             }));
           }
         }
       });
     },
     change: function(event, ui) {
       if (ui.item == null) {
         $("#subject_name").val("");
         $("#subject_code").val("");
         $("#subject_name").focus();
       }
     },
   
     minLength: 0,
     classes: {
       "ui-autocomplete": "auto_compl-cat"
     },
   
     focus: function(event, ui) {
       event.preventDefault();
       // $("#subject_name").val(ui.item.label);
   
       $("#subject_name").val(ui.item.label);
   
     },
   
     select: function(event, ui) {
       if (ui.item.label == "Subject not found") {
   
         $("#subject_name").val('');
         $("#subject_code").val('');
         event.preventDefault();
         return false;
       }
       //console.log( "Selected: " + ui.item.label + " aka " + ui.item.value);
       $("#subject_name").val(ui.item.label);
       $("#subject_code").val(ui.item.value);
       return false;
     }
   });
   

from https://stackoverflow.com/questions/21385892/how-to-use-source-function-and-ajax-in-jquery-ui-autocomplete by cc-by-sa and MIT license