jQuery 자동 완성 드롭 다운을 사용하여 입력 내용을 표시합니다.

프로젝트 데모를 위해 jQuery 주소 자동 완성 프로토 타입을 신속하게 작성합니다.jQuery 자동 완성 드롭 다운을 사용하여 입력 내용을 표시합니다.

기본적으로 사용자가 초기 입력 필드에 주소를 입력하면 가능한 주소 (addresspicker-style)의 드롭 다운 목록이 자동으로 표시됩니다.

입력란에 입력되는 내용을 반영하기 위해 "입력 한 주소 :"주소 목록의 첫 번째 항목으로 삽입하면됩니다.

참조 :

<!doctype html> 

<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Autocomplete</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <style> 
#results { float: right; } 
#address { float: left; } 
</style> 
    <script> 
    $(function() { 

    $("#results").hide(); 

    var addresses = [{ 
     value: "25/167 Smith", 
     add1: "25/167 Smith Street", 
     loc: "Brisbane", 
     state: "Queensland", 
     postcode: "4000" 
    }, { 
     value: "25/167 Smith", 
     add1: "25/167 Smith Street", 
     loc: "Mandaring", 
     state: "WESTERN AUSTRALIA", 
     postcode: "6073" 
    }, { 
     value: "25/167 Smith", 
     add1: "25/167 Smith Creek Road", 
     loc: "Werombi", 
     state: "NEW SOUTH WALES", 
     postcode: "2570" 
    }, { 
     value: "25/167 Smith", 
     add1: "25/167 Smith Street", 
     loc: "Collingwood Park", 
     state: "QUEENSLAND", 
     postcode: "4301" 
    }, { 
     value: "Level 25/167 Smith", 
     add1: "25/167 Smith Terrace", 
     loc: "Auchenflower", 
     state: "QUEENSLAND", 
     postcode: "4066" 
    }, 
    ]; 

    $("#address").autocomplete({ 
     minLength: 0, 
     source: addresses, 
     focus: function(event, ui) { 
//  $("#address").val(ui.item.add1 + ", " + ui.item.loc + ", " + ui.item.state + " " + ui.item.postcode); 
     return false; 
     }, 
     select: function(event, ui) { 
     $("#address").val(ui.item.label); 
     // $("#address-id").val(ui.item.value); 
     $("#address-add1").val(ui.item.add1); 
     $("#address-loc").val(ui.item.loc); 
     $("#address-state").val(ui.item.state); 
     $("#address-postcode").val(ui.item.postcode); 
     $("#results").show(); 
     return false; 
     } 

    }) 
    .data("ui-autocomplete")._renderItem = function(ul, item) { 
     return $("<li>") 
     .append("<a>" + item.add1 + ", " + item.loc + ", " + item.state + " " + item.postcode + "</a>") 
     .appendTo(ul); 
    }; 
    }); 
    </script> 
    </head> 
    <body> 
    <p>Start by typing "25"</p> 
<input id="address" /> 
<div id="results"> 
    <p> 
    <input id="address-add1" /> 
    </p> 
    <p> 
    <input id="address-loc" /> 
    </p> 
    <p> 
    <input id="address-state" /> 
    </p> 
    <p> 
    <input id="address-postcode" /> 
    </p> 
    </div> 
</body> 
</html>

출처

2013-04-08 hotdiggity

입니다 ? –

을 시도해보십시오

var eladdress = $("#address").autocomplete({ 
      minLength : 0, 
      source : addresses, 
      focus : function(event, ui) { 
       // $("#address").val(ui.item.add1 + ", " + 
       // ui.item.loc + ", " + ui.item.state + " " + 
       // ui.item.postcode); 
       return false; 
      }, 
      select : function(event, ui) { 
       $("#address").val(ui.item.label); 
       // $("#address-id").val(ui.item.value); 
       $("#address-add1").val(ui.item.add1); 
       $("#address-loc").val(ui.item.loc); 
       $("#address-state").val(ui.item.state); 
       $("#address-postcode").val(ui.item.postcode); 
       $("#results").show(); 
       return false; 
      } 

     }); 

var _renderMenu = eladdress.data("ui-autocomplete")._renderMenu; 
eladdress.data("ui-autocomplete")._renderMenu = function(ul, items) { 
    $('<li></li>').text('You Typed: ' + eladdress.val()).appendTo(ul); 
    _renderMenu.apply(this, arguments); 
} 


eladdress.data("ui-autocomplete")._renderItem = function(ul, 
     item) { 
    return $("<li>").append("<a>" + item.add1 + ", " + item.loc 
      + ", " + item.state + " " + item.postcode + "</a>") 
      .appendTo(ul); 
};

데모 : 그들이 여전히 입력 상자에있을 것입니다 입력하기 때문에, 이것의 목적은 무엇 Fiddle

출처

2013-04-08 03:01:51

나는 우리가 우리의 의지로 사적인 기능에 접근하는 방법을 좋아한다. – basarat

@BasaratAli jquery UI의 경우 데모 그 자체가 보여준 이후 개인적인 방법을 오버라이드하는 것은 받아 들여지는 방법이다. [category demo] (http://jqueryui.com/autocomplete/#categories) 어떻게'_renderItemData' 메소드를 오버라이드 (override) 할 것인지 제안했다. –

또한 자바처럼 자바 스크립트에서 private 메서드로 아무것도 존재하지 않습니다. '_'은 API 메서드가 아니라 향후 버전에서 예고없이 변경 될 수있는 내부 메서드임을 제안하는 메커니즘입니다. –

jQuery 자동 완성 드롭 다운을 사용하여 입력 내용을 표시합니다.

답변

관련 문제