jQueryu의 UI를 자동 완성이 나던 #

Question

내가 jQuery를-UI 자동 완성을 사용하여 MVC C#을보기에서 자동 완성 텍스트 상자를 표시 할

C MVC에서 아무것도 보여이이 코드가

@{ 
    ViewBag.Title = "Index"; 
} 
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 

    <script type="text/javascript"> 
     $(function() { 
      $("#SearchString").autocomplete({ 
       source: "/Borrar/autocompletar", 
       minLength: 1, 
       select: function (event, ui) { 
        if (ui.item) { 
         $("#SearchString").val(ui.item.value); 
        } 
       } 
      }); 
     }); 
    </script> 
    <div class="container col-md-10 col-md-offset-3"> 
     <h2>Autocompletar</h2> 
     @using (Html.BeginForm()) 
     { 
      <p> 
       Empresa: @Html.TextBox("SearchString") 
       <input type="submit" value="Search" /> 
      </p> 
     } 
    </div> 

내보기의 코드 텍스트 상자

public JsonResult autocompletar(string prefix) 
     { 
      List<GFC_Site.ViewModels.EmpresaAutocomplete> listado = new List<GFC_Site.ViewModels.EmpresaAutocomplete>(); 
      ProxyGFC.ServiceGFCClient cliente = new ProxyGFC.ServiceGFCClient(); 
      List<WcfService.Entidades.EmpresaAutocomplete> listadoBase = new List<WcfService.Entidades.EmpresaAutocomplete>(); 
      listadoBase = cliente.Autocompletar(prefix); 
      foreach (var item in listadoBase) 
      { 
       GFC_Site.ViewModels.EmpresaAutocomplete dato = new ViewModels.EmpresaAutocomplete(); 
       dato.empresa = item.empresa; 
       //dato.np = item.np; 
       listado.Add(dato); 
      } 
      return Json(listado, JsonRequestBehavior.AllowGet); 

     } 

을 채워야 컨트롤러의 (GFC_Site.ViewModels.EmpresaAutocomplete)는 하나의 문자열 속성 (Empresa 연락처) 및 (ProxyGFC.ServiceGFCClient의 cliente)와 클래스이다

는 WCF 서버에 연결이되면, WCF는 응용 프로그램과 데이터를 연결하는 것입니다. base (ListheradoBase List)는 두 개의 속성 (empresa 및 np)이있는 WCF의 클래스입니다.

이 내가

public List<EmpresaAutocomplete> Autocompletar(string prefix) 
{ 
    OdbcCommand cmd = Helper.Commandos.CrearComando(); 
    cmd.CommandText = "select numero_patronal, nombre_empresa from empresas where estado= ? and nombre_empresa like ?"; 
    cmd.Parameters.Add("@estado", OdbcType.VarChar).Value = "1"; 
    cmd.Parameters.AddWithValue("@empresa", prefix + "%"); 
    List<EmpresaAutocomplete> data = new List<EmpresaAutocomplete>(); 
    try 
    { 
     cmd.Connection.Open(); 
     var reader = cmd.ExecuteReader(); 
     while (reader.Read()) 
     { 
      EmpresaAutocomplete datos = new EmpresaAutocomplete(); 
      datos.np = reader["numero_patronal"].ToString(); 
      datos.empresa = reader["nombre_empresa"].ToString(); 
      data.Add(datos); 
     } 

    } 
    catch (Exception ex) 
    { 

     throw new ApplicationException("Excepcion :", ex); 
    } 
    return data; 

} 

아니라 텍스트 상자에 표시 할 것을 정보를 검색 WCF의 방법은, 내 문제는 텍스트 상자가 나던 것을 보여 것을 실제로 냉동 도착입니다

문제의 원인을 알려주십시오. 우리가 jQuery를 UI 스크립트 파일과 CSS 파일에 대한 참조를 추가하는 경우

<label for=”somevalue”>Some value:</label><input type=”text” id=”somevalue” name=”somevalue”/> 

, 우리는 스크립트를 추가 할 수 있습니다

Answer 1

첫째는,의 텍스트 입력을 시작으로 행동 자동 완성에 대해 살펴 보자 우리의보기로 차단 :

<script type=”text/javascript” language=”javascript”> 
$(document).ready(function() { 
    $(‘#somevalue’).autocomplete({ 
     source: ‘@Url.Action(“Autocomplete”)’ 
    }); 
}) </script> 

이 스크립트 블록은 ID로 텍스트 입력을 식별하고이 DOM 요소에 대한 자동 완성 동작을 묶는 자동 완성 기능을 호출합니다. 우리는 데이터 소스를 식별하는 URL을 전달합니다. 이 게시물에서는 JSON 데이터 (아래 참조)를 반환하는 ASP.NET MVC 작업을 만들었습니다. 뷰에서 URL 태그를 사용하여 라우팅 테이블에서이 작업에 대한 URL을 찾으십시오. URL을 하드 코딩해야하는 유혹을 피하십시오. 이렇게하면 라우팅 테이블이 중복되어 나중에 라우팅을 변경하기가 어려워집니다. 1

public ActionResult Autocomplete(string term) 
{ 
var items = new[] {“Apple”, “Pear”, “Banana”, “Pineapple”, “Peach”}; 

var filteredItems = items.Where( 
    item => item.IndexOf(term, StringComparison.InvariantCultureIgnoreCase) >= 0 
    ); 
return Json(filteredItems, JsonRequestBehavior.AllowGet); 
} 

https://blogs.msdn.microsoft.com/stuartleeks/2012/04/23/asp-net-mvc-jquery-ui-autocomplete/