자동 완성 중에 jquery가 작동하지 않는 숨겨진 필드에 값을 설정하십시오.

Question

get-request을 서버로 전송하는 간단한 양식이 있습니다.

<form id="form0" method="get"> 
    <input id="searchTerm" type="hidden" name="searchTerm"> 
    <input type="search" id="userSearchTerm" /> 
    <input type="submit" value="submit" /> 
</form> 

는 그리고 서버에서 JSON 데이터를 얻을 수 JQuery와 - UI auto-complete을 사용하고 예, 그것을 잘 작동합니다.

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#userSearchTerm").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "/Home/AutoComplete", 
       type: "POST", 
       dataType: "json", 
       data: { term: request.term }, 
       success: function (data) { 
        alert("successfully got the data"); 
        response($.map(data, function (item) { 
         return { name: item.name, value: item.age }; 
        })) 

       } 
      }) 
     }, 
     select: function (e, ui) { 
      alert(ui.item.name); 
      $('#searchTerm').val(ui.item.name); 
      $("#form0").submit(); 
     } 


    }); 
    return false; 
}) 

내가 좋아하는 경고 메시지뿐만 아니라 " 항목 이름" " 성공적으로 데이터를 얻었다"얻는다. Google 크롬 아래의 Network 탭에서도 확인 -> json 응답이 있습니다.

문제는 양식을 제출할 수 없다는 것입니다. 회선을 삭제하면 $('#searchTerm').val(ui.item.name); 양식이 제출되고 모든 것이 잘됩니다.

아무도 올바른 방향으로 나를 가리킬 수 있습니까? 왜이 간단한 자바 스크립트가 실행되지 않습니다? ui.item.name 같은 ui.item.value에 교체

Answer 1

이 시도 :

$("#tags").autocomplete({ 
     source: availableTags, 
     select: function (e, ui) { 
       alert(ui.item.value); 
       $("#searchTerm").val(ui.item.value); 
       $("#form0").submit(); 
      } 
    }); 

DEMO FIDDLE

Answer 2

시도,

select: function (e, ui) { 
    alert(ui.item.value); 
    $('#searchTerm').val(ui.item.value); 
    $("#form0").submit(); 
} 

Fiddle

Answer 3

올바른 방향으로 나를 가르키고 그들이 말한 jfiddle 노력에 감사합니다. @Unknown, @Rohan, @Mike, @Jatin.

그래서, 수업 배운 몇 가지 : 시간 "Why it did not work?"

음에 대답, 대답은 : ID = SEARCHTERM 및 I와 유형 "hidden"의 입력 필드가 발생했습니다

양식 제출 전에 그 값을 설정하려고했습니다. 내가 좋아하는 뭔가를 사용

,

$("#searchTerm").value("TEST"); 

브라우저가 말해 행복하지 않은 것 같다, 그 Object [object Object] has no method 'value'.

$('input[name=searchTerm]').val(ui.item.name); 

그리고 두 번째 부분 :

이

내 JSON 객체입니다 따라서

, jquery을 사용하여 폼의 숨겨진 필드에 값을 설정하는 적절한 방법은 같은 것을 사용하는 것입니다 타입 : name and value pairs.그래서, 일반적으로 나는

$('input[name=searchTerm]').val(ui.item.name); or $('input[name=searchTerm]').val(ui.item.value); 

뿐 아니라 $('input[name=searchTerm]').val(ui.item); //This is not sensible.

추가 정보를 사용한다 :

당신은 개발자 도구 (불러 F12을 눌러

이 불을 지르고 경우 실 거예요 출시 될 설치됨).

Console tab으로 이동하면 다양한 스크립트 오류가 발생합니다.

Network tab으로 이동하면 모든 JSON 요청이 표시됩니다.