自動搜索的Ajax無法正常工作

Question

這是下面的代碼，當我從建議列表中選擇一個時，它工作正常，但是當我按下搜索按鈕時，它不起作用，請幫助！

<script type="text/javascript">
var stream;

function suggest(inputString) {
    if (inputString.length == 0 || inputString == " ") {
        $('#suggestions').fadeOut();
    } else {
        stream = inputString;
        $('#listings').addClass('load');
        $.post("autosuggest.php", { queryString: "" + inputString + "" }, function (data) {
            if (data.length > 0) {
                $('#suggestions').fadeIn();
                $('#suggestionsList').html(data);
                $('#listings').removeClass('load');
            }
        });
    }
}

function fill(thisValue) {
    $('#listings').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 100);
    stream = thisValue;
}
function go() {
    $('#listings').val(stream);
}
</script>

這是HTML部分

<div class="search">
 <form id="form" action="search_results.php" method="POST" class="new-search">
  <div class="field" id="searchform">
    <input type="text" size="25" value="" name="search_term" id="listings" onkeyup="suggest(this.value);"
        onblur="fill();" class="" />
    <button type="submit" name="submit" value="submit" id="search" onclick="go();">
        Search</button>
    <div class="suggestionsBox" id="suggestions" style="display: none;">
        <div class="suggestionList" id="suggestionsList">
            &nbsp;
        </div>
    </div>
  </div>
 </form>
</div>

當我按下搜索按鈕時，它不起作用。 POST方法未傳遞名稱。

Answer 1

您的id="search"按鈕的type="submit"並且go()不會調用preventDefault()因此單擊該按鈕將提交表單並重新加載頁面，然后其他代碼才能運行

另外，包含事件處理程序並從html中刪除所有js調用屬性

更新后，您的代碼可能類似於以下內容，盡管我最終無法完全對其進行測試

JavaScript的：

   <script>
        $(function() {
            var stream;
            var $suggestions=$('#suggestions');
            var $listings= $('#listings');

            $('#search').click(function(event) {
                event.preventDefault()
                $('#listings').val(stream);
            });

            $listings.keyup(function() {
                var inputString=$(this).val();
                // use a custom timer to only make the call when the user stops typing
                keyupDelay(function(){
                    if (inputString.length == 0 || inputString == " ") {
                        $suggestions.fadeOut();
                    }
                    else {
                        $listings.addClass('load');
                        $.post("autosuggest.php", {
                            queryString: "" + inputString + ""
                        }, function(data) {
                            if (data.length > 0) {
                                $suggestions.fadeIn();
                                $('#suggestionsList').html(data);
                                $listings.removeClass('load');
                            }
                        });
                    }
                }, 1000 );
            });
            $listings.blur(function(){
                var thisValue =$(this).val();
                // $listings.val(thisValue); // .....this is equivalent to what you had but it doesnt make sense, you're setting its value to itself
                $suggestions.delay(1000).fadeOut();
                stream = thisValue;

            });
            //  function to handle the keyup timer stuff
            var keyupDelay = (function(){
                var timer = 0;
                return function(callback, ms){
                    clearTimeout (timer);
                    timer = setTimeout(callback, ms);
                };
            })();
        });
    </script>

HTML：

<div class="search">
    <form id="form" action="search_results.php" method="POST" class="new-search">
        <div class="field" id="searchform">
            <input type="text" size="25" value="" name="search_term" id="listings" class="" />
            <button type="submit" name="submit" value="submit" id="search">Search</button>
            <div class="suggestionsBox" id="suggestions" style="display: none;">
                <div class="suggestionList" id="suggestionsList">
                    &nbsp;
                </div>
            </div>
        </div>
    </form>
</div>