Question

这是下面的代码，当我从建议列表中选择一个时工作正常，但是当我按下搜索按钮时它不起作用请帮助！

<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>

这是html部分

SELECT e.employeeid, e.lastname, e.firstname, e.id_sc, e.id_es,
       q1.badgeno, q1.deact, q1.id_rem, q1.id_s, 
       q2.adate, q2.attritiondate, q2.id_at
FROM tblemployee e
INNER JOIN 
    (SELECT b.badgeno, b.employeeid, MAX(b.deactivation) AS deact, b.id_rem, b.id_s
     FROM tblbadge b
     GROUP BY b.employeeid) q1
     ON q1.employeeid = e.employeeid
 INNER JOIN
    (SELECT a.employeeid, MAX(a.adate) AS adate, a.attritiondate, a.id_at
     FROM tblemployeeactivity a
     GROUP BY a.employeeid) q2
     ON e.employeeid = q2.employeeid

当我点击搜索按钮时，它无法正常工作。 POST方法没有传递名称。

Answer 1

id="search"的按钮为type="submit"且go()未调用preventDefault()，因此点击该按钮会提交表单，然后在其他代码运行之前重新加载页面< / p>

此外，包含事件处理程序并从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>

ajax for autosearch无法正常工作

1 个答案: