데이터 속성 및 jquery로 재사용하기

Question

많은 텍스트 파일에 Bootstrap Type-ahead가 첨부되어 있습니다. 그 때 id를 사용하여 선택하고 미리 입력하십시오.

$("#SireTag").typeahead({ 
    source: function (query, process) { 

     $.ajax({ 

      url: '/Bull/GetSireTag', 
      type: 'POST', 
      data: 'query=' + query, 
      dataType: 'JSON', 
       async: true, 
       success: function (data) { 
        console.log(data); 

        process(data); 
       } 

      }); 
     } 

    }); 

샘플 지금은 내 모든 텍스트 상자에 미리 입력 연결하는 하나의 자바 스크립트 코드를 사용하여 더 읽기와 짧은하기로 결정했다.

<input data-typeahead-url="/Bull/GetSireTag" id="SireTag" name="SireTag" type="text" value=""> 

새로운 자바 스크립트

$('*[data-typeahead-url]') 
     .each(function() { 
      alert(this); 
      $(this).typeahead({ 
       source: function (query, process) { 
        $.ajax({ 
         url: $(this).data("typeahead-url"), 
         type: 'POST', 
         data: 'query=' + query, 
         dataType: 'JSON', 
         async: true, 
         success: function (data) { 
          console.log(data); 

          process(data); 
         } 
        }) 
       } 
      }); 

     }); 

하지만 내가 지금 무슨 잘못 자바 스크립트 누구와도 너무 능숙하지 않다가 작동하지 않습니다. Ajax 개발자 도구를 사용해 보았는데 요청이 만들어지지 않았습니다.

Answer 1

$ ('* [data-autocomplete-url]')은 (는) data-typeahead-url을 사용 중이기 때문에 요소를 선택하지 않습니다.

$('input[data-typeahead-url]').each(function() { 
    $(this).typeahead({ 
     source: function (query, process) { 
      return $.ajax({ 
       url: $(this).data("typeahead-url"), 
       type: 'POST', 
       data: { query: query }, 
       dataType: 'json', 
       async: true, 
       success: function (resp) { 
        console.log(resp); 

        return process(resp); 
       } 
      }); 
     } 
    }); 
}); 

는 희망이 도움이 :

Answer 2

당신은 대신 사용, 디버깅 console.log()을 alert()를 사용하지 마십시오 source에 아약스 결과를 return해야합니다.

Answer 3

$ ('* [선행 입력 데이터-URL]) .each (함수() {

var url = $(this).data("typeahead-url"); 

$(this).typeahead({ 
    source: function (query, process) { 
     $.ajax({ 
      url: url, 
      type: 'POST', 
      data: 'query=' + query, 
      dataType: 'JSON', 
      async: true, 
      success: function (data) { 
       console.log(data); 

       process(data); 
      } 
     }) 
    } 
}); 

});

문제점 : 코드에서 아약스 요청을하고 있지만 같은 주소로 보내고 있습니다. 진단 : 원하는 결과를 얻은 log($(this).data("typeahead-url");)을 시도했습니다. 해결 방법 : 내가 만든 URL이 AJAX 호출

var url = $(this).data("typeahead-url"); 

희망이 도움말에 매개 변수로 사용되는 저장됩니다.