4

我想做的事

在文本字段中写入时，我希望<div class="result">用 PHP 回显的内容填充。

但它不起作用！

jQuery

$(document).ready(function() {
    var search = $("#search");
    if (search.val() !== '') {
        search.keyup(function() {
            $.post("index.php", { search : search.val()}, function(data) {
                $(".result").html(data);
            });
        });
    }
});

php

    if (isset($_POST['search'])) {
        echo 'hello';
    }

html

<input type="text" name="search" id="search"/>
<br />
<div class="result"></div>

问题

填写输入时，什么都没有发生，这意味着在 keyup 上发布输入的数据（输入新字符/或删除。

是什么阻止它工作？我是 jQuery 新手。

谢谢。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
4

7 回答 7

5

这是错误的。

if (search.val() !== '') {

上面的行应该是，

if (search.val() != '') {

编辑：

然后将 if 条件包装在 keyup 函数中。

$(document).ready(function() {
    var search = $("#search");

        search.keyup(function() {
            if (search.val() != '') {
                $.post("getInputs.php", { search : search.val()}, function(data) {
                    $(".result").html(data);
                });
            }
        });
});
于 2013-04-12T12:29:05.393 回答
2

当我遇到这样的情况时，我只是开始将问题分成两半，看看它失败的地方。这是我会尝试的几件事。

首先，在您的 jQuery 中，向控制台添加一些输出：

if (search.val() !== '') {
        console.log("I am not empty so I should go to index.php");
        search.keyup(function() {
            $.post("index.php", { search : search.val()}, function(data) {
                $(".result").html(data);
            });
        });
    } 
else
{
     console.log("search val was empty");
}

当然，您可以随时检查浏览器网络分析器以查看它是否对该资源进行了 POST。这将告诉您问题是否在您的search.val测试中。

然后，如果您想调试 PHP 端，您可以删除isset测试并始终返回“hello”。这将告诉您它是否与您的 POST 变量或检查有关。

最后，您可以输出数据结果以确保有什么东西回来了。这将消除任何$(".result").html()问题：

$.post("index.php", { search : search.val()}, function(data) {
   console.log(data);
   $(".result").html(data);
});

如果这些都不起作用，也许您可​​以keyup首先切换绑定方式：

$(document).ready(function() {
    $("#search").keyup(function() {
       if ($(this).val() !== '') {
            $.post("index.php", { search : $(this).val()}, function(data) {
                $(".result").html(data);
            });
        });
    }
});
于 2013-04-12T12:40:27.677 回答
0 
$(document).ready(function() {
    var search = $("#search");


});

仅在文档准备就绪时触发，而不是在 keyup 时触发，这意味着 var $("#search").val() 将是空白的。

更改您的代码以在每次按键时捕获输入值。

$(document).ready(function() {
         search.keyup(function() {

             var value = $("#search").val();
             if(value!="")
            {
             $.post("index.php", { search : value}, function(data) {
                $(".result").html(data);
            });
           }
        });

});
于 2013-04-12T12:35:28.133 回答
0

你的逻辑不正确。如果您的#search 中包含文本，则仅设置 keyup 事件处理程序。不幸的是，当该脚本在准备好的文档上运行时，#search 中没有任何值，因此您的 keyup 处理程序永远不会被设置，这就是它永远不会触发的原因。

于 2013-04-12T12:36:36.817 回答
0

实际上，您的代码没有任何问题。我已经尝试过您的代码本身。唯一的问题是您有条件地调用了 keyup 函数。您的 Javascript 代码应如下所示：

$(document).ready(function() {
    var search = $("#search");
        search.keyup(function() {
            if (search.val() != '') {       
            $.post("index.php", { search : search.val()}, function(data) {
                $(".result").html(data);
            });
            }
        });

});

在这里，条件应该在 keyup 函数内。

于 2013-04-12T12:57:41.160 回答
0

我重写了你的一些逻辑并且能够让它工作。一种是您检查以确保您有价值的方式。我正在检查长度而不是字符串比较。此外，我没有将事件绑定到字段，而是将事件绑定到文档上并以字段为目标。试试看：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<input type="text" name="search" id="search"/>
<br />
<div class="result"></div>

<script>
    $(document).ready(function() {
        $(document).on('keyup', 'input#search', function() {
            if($(this).val().length > 0) {
                $.post('index.php', {"search":$(this).val()}, function(data) {
                    $('div.result').html(data);
                });
            }
        });
    });
</script>
于 2013-04-12T12:46:20.120 回答
0 
// when the html is loaded
$(document).ready(function() {
    // find an element with the id 'search'
    var search = $("#search");

    // if this element's value is NOT an empty string -- oh look, it is!
    if (search.val() !== '') {
        // well, going to skip all this here then
        search.keyup(function() { // don't care
            $.post("index.php", { search : search.val()}, function(data) { // don't care
                $(".result").html(data); // don't care
            });
        });
    }

    // YAAAAY! All done!
});
于 2013-04-12T12:47:31.233 回答