자바 스크립트 양식 동작

Question

데이터베이스의 항목을 특징으로하는 자동 완성 기능이있는 텍스트 필드가 내 페이지에 있습니다. 이 옵션을 선택하면 jquery를 사용하여 페이지를 스크롤하여 해당 결과가 페이지에있는 위치로 이동합니다. 텍스트 필드를 다시 클릭하지 않아도 양식이 제출 버튼의 결과로 스크롤되기를 원합니다. 오히려 양식 코드

텍스트 필드를 클릭보다는, 제출에서 발생 있도록 어떻게 코드를 편집 할 것 -

<form autocomplete="off"> 
<form name="search-highlight" id="search-highlight" method="post" action="#"> 
<p> 
Film Name <label>:</label> 
<input type="text" name="scroll" id="scroll" class="scroll"/> 
         <!--input type="button" value="Get Value" /--> 
</p> 
<input type="submit" value="find" /> 
</form> 

과

자바 스크립트

$("#scroll").autocomplete("get_film_list.php", { 
    width: 260, 
    matchContains: true, 
    //mustMatch: true, 
    //minChars: 0, 
    //multiple: true, 
    //highlight: false, 
    //multipleSeparator: ",", 
    selectFirst: false 
}); 


$("#scroll").click(function(){ 

    // start variables as empty 
    var scroll = ""; 
    var n = "0"; 

    // hide the results at first 
    $("p.results").hide().empty(); 
    // grab the input value and store in variable 
    scroll = $('#scroll').attr('value'); 
    console.log("The value of film is: "+scroll); 

    $('span.highlight').each(function(){ 
     $(this).after($(this).html()).remove(); 
    }); 

    if($('#scroll').val() == ""){ 
     $("p.results").fadeIn().append("Enter film in field above"); 
     $('#scroll').fadeIn().addClass("error"); 
     return false; 
    }else{ 
     $('div.timeline :contains("'+scroll+'")').each(function(){ 
      $(this).html($(this).html().replace(new RegExp(scroll,'g'), '<span class="highlight">'+scroll+'</span>')); 
      $(this).find('span.highlight').fadeIn("slow"); 
      var offset = $(this).offset().top 
      $('html,body').animate({scrollTop: offset}, 2000); 
      return false; 

     }); 

     // how many did it find? 
     n = $("span.highlight").length; 
     console.log("There is a total of: "+n); 

     if(n == 0){ 
      $("p.results").fadeIn().append("No results were returned"); 
     }else{ 
      $("p.results").fadeIn().append("<strong>Returned:</strong> "+n+" result(s) for: <em><strong>"+scroll+"</strong></em>."); 
     } 
     return false; 
    } 
}); 
}); 

난 당신이 내 문제를 이해 희망을 - 그렇지 않다면 데모를 듣고 (최적화되지 않은) www.ignitethatdesign.com/CheckFilm/index.php

DIMENSION

Answer 1

$("#scroll").click(을 제출 버튼 (예 : $("#search-highlight input[type='submit'].click)으로 변경하면 문제가 발생합니다.

당신은 아마 당신의 입력에 클릭 이벤트가 처리 된 브라우저에 표시하기 위해, event.stopPropagation()를 호출 할 수 있도록 나중에에

.click(function(event)){ 같이 이벤트 인수를 포함하도록 클릭 콜백의 서명을 확장한다 (양식을 다시 게시하려고 시도하지 않습니다).