Question

我有一个网站，允许用户评论书籍和文章，主要表单有搜索输入，用于查找相关的书籍或文章（来源）。我使用jQuery根据输入的搜索条件从外部站点动态加载新源，然后使用AJAX返回列表中的源。我有两个问题：

现在，在用户输入四个字符后，jQuery将与每个新的按键事件一起运行。等待用户停止输入，然后只运行jQuery事件的更好方法是什么？
在Firefox中，列表没有样式，但列表的CSS包含在已与页面关联的主CSS表中。（这在Chrome和Safari中运行得很好。）

我使用CodeIgniter，但无论熟悉CI，大多数示例代码都应该是可访问的。如上所述，现在所有的CSS都在一个与此页面相关联的工作表中。

这是html的基本形式：

<?=form_open('/scrawls/add')?>
<h2>Add a Scrawl</h2>
<div id="scrawl-source-container">
    <p class="form-par">Search for a reference:</p>
    <input type="text" name="scrawl_source_search" id="scrawl-source-search">
    <div id="scrawl-source-suggestions">
        // this is where the list of suggestions is inserted
    </div>
</div>
<input type="hidden" name="scrawl_source_id" value=0 id="scrawl-source-id">
// redacted code here that deals with other fields 
<div id="selected-ref">
    You've selected: <span id="selected-ref-name"></span>
</div>
// redacted code here that deals with other fields
<?=form_submit('scrawl_submit','Post')?>
<?=form_close()?>

这是javascript（不是我的强项）：

$(document).ready(function() {

$("input#scrawl-source-search").keypress(function() {
    var length = $(this).val().length;
    // check to see if there are more than four characters in the input field
    if (length > 4) {
        // need to make some sort of loading div here
        // make Ajax request to find matching sources
        $.post("http://mysite.com/refs/refMatch",{ term:$("input#scrawl-source-search").val()}, function(data) {
            if (data=="No output") {
                $("div#scrawl-source-suggestions").show();
                $("div#scrawl-source-suggestions").html("No matches.");
            } else {
                $("div#scrawl-source-suggestions").html(data).hide();
                $("div#scrawl-source-suggestions").slideDown();
            }
          });
    }
});
});

通过AJAX访问的“refMatch”页面检查外部站点以查看是否需要对数据库进行任何新添加，然后从db输出匹配。这是输出文件：

<?php
if(isset($refs))
{
echo '<ul class="autocomplete-list">';
foreach($refs as $r)
{
    echo '<li class="autocomplete-entry">';
    echo '<span class="source-id" style="display:none">'.$r->ref_id.'</span><span class="source-title">'.$r->ref_title.'</span>';
    if($r->ref_author != '') {
        echo ' by <span class="source-author">'.$r->ref_author.'</span>';
    }
    echo '</li>';
}
echo '</ul>';
} else {
    echo "No output";
}

那么，为了重复我的问题，为什么FF没有设计AJAX输出？什么是触发jQuery AJAX调用的更好方法？

Answer 1

我不是肯定问题是什么，但是你的帖子有一些好奇的东西。鉴于这适用于Chrome和Safari，看起来你的标记/样式是正确的。您能为您的网站提供网址吗？

首先，您是通过Javascript向您的元素添加CSS类吗？如果是这样，那么您添加的样式只会影响那个时间点属于DOM的元素，因此您可能会遇到竞争条件，实际上这种情况恰好适用于Chrome和Safari，但不适用于Firefox。

其次，你提到你正在使用jQuery从外部源（我猜想的外部网站）加载数据。这违反了Same Origin Policy，我希望在所有浏览器中都会失败。这可能是一些问题的原因。

我强烈建议您使用Firebug对此进行问题排查。您可以将其用于inspect HTML并真正了解正在发生的事情。

Answer 2

我在Safari遇到了同样的问题。尽管CSS文件在加载了ajax的HTML文件中正确链接，但加载的内容根本没有样式化。尝试链接父文档中的CSS文件！冗余，是 - 但有效。：）

Firefox不会在使用jQuery AJAX加载的内容上呈现CSS样式

2 个答案: