0

データベースのアイテムをオートコンプリートするテキストフィールドがページにあります。これを選択すると、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>

とjavascript

$("#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

寸法

4

1 に答える 1

0

$("#scroll").click(送信ボタンをターゲットにするように変更すると（ のようなもの$("#search-highlight input[type='submit'].click）、動作が得られます。

次のように、クリック コールバックのシグネチャを拡張して、イベント引数を含める必要があります。

.click(function(event)){そのため、後で を呼び出しevent.stopPropagation()て、入力のクリック イベントが処理されたことをブラウザに示すことができます (フォームをポストバックしようとはしません)。

于 2012-09-24T17:43:22.400 に答える