jQueryUI 자동 완성 위젯을 사용하여 선택한 항목의 표시 제어

Question

jQueryUI 자동 완성 위젯을 사용하여 JSON 웹 서비스에서 데이터를 가져옵니다. 아래의 예와 매우 유사한

<script> 
$(function() { 
    $("#city").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: "http://ws.geonames.org/searchJSON", 
       dataType: "jsonp", 
       data: { 
        featureClass: "P", 
        style: "full", 
        maxRows: 12, 
        name_startsWith: request.term 
       }, 
       success: function(data) { 
        response($.map(data.geonames, function(item) { 
         return { 
          label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
          value: item.id 
         } 
        })); 
       } 
      }); 
     }, 
     minLength: 2 
    }); 
}); 
</script> 

내 질문은 뭔가가 목록에서 선택 입력 상자 (#city)에 투입을 제어 할 수있는 방법입니다. 현재 자동 완성 기능이 잘 작동하고 레이블 목록이 제공됩니다. 그러나 목록 항목 중 하나를 선택하면 입력 된 값이 입력됩니다. 이 경우에 사용하고자하는 ID이지만 값 데이터가 아닌 레이블 데이터를 표시하도록 입력을 원합니다.

Answer 1

그럼 레이블과 같은 값을 만들어야합니다. 귀하의 경우 그것은 다음과 같습니다 :

success: function(data) { 
    response($.map(data.geonames, function(item) { 
     return { 
     label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
     value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
     } 

    })); 
} 

내 생각에 다른 용도로 값이 필요합니다. 나는 같은 상황을 겪었고 요구 사항에 따라 두 가지 옵션이 있습니다.

옵션을 선택할 때 값을 저장할 수있는 숨김 필드가있을 수 있습니다.

select: event.preventDefault(); 
     $("#city").val(ui.item.label); 

이됩니다

$(function() { 
    $("#city").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: "http://ws.geonames.org/searchJSON", 
       dataType: "jsonp", 
       data: { 
        featureClass: "P", 
        style: "full", 
        maxRows: 12, 
        name_startsWith: request.term 
       }, 
       success: function(data) { 
        response($.map(data.geonames, function(item) { 
         return { 
          label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
          value: item.id, 
          source: item 
         } 
        })); 
       } 
      }); 
     }, 
     minLength: 2, 
     change: function(event, ui) { 
      if (ui.item) { 
       $('#your_hidden_input').val(ui.item.source.id); 
       $(this).val(ui.item.value); 
      } 
     } 
    }); 
}); 

Answer 2

것은 당신이 다음 위젯의 옵션을 선택, 당신은 다음을 수행 할 수 jQueryUI 자동 완성 위젯을 사용하는 경우 :

이것은 어떻게 보일지입니다 select 이벤트의 입력 필드에 특정 항목의 레이블 데이터를 삽입하십시오.