jquery搜索:包含选择器

时间:2012-09-04 10:48:54

标签: jquery database search anchor contains

我正在尝试进行简单搜索,我的目标是避免任何数据库调用,因为我只搜索特定列表。

我正在制作一个词汇表,其中所有单词都显示在包含更多信息的列表中。 我可以以某种方式使用:contains选择器转到用户搜索过的单词,即:“rooftiles”

喜欢:

$("div:contains('rooftiles')");

根据我的例子,我在搜索框中填写“rooftiles”,如果找到该词,它将跳转到la <a name="rooftiles">

这个词。

有人能指出我如何做到这一点的正确方向吗?

3 个答案:

答案 0 :(得分:2)

$('#search').on('keyup', function(e) {
    // when user press enter
    if (e.which == 13) {
        var val = $.trim(this.value);
        if (val) {
            var target = $('div:contains(' + val + ')').first();
            if (target.length) {
                var top = target.position().top;
                $('body').animate({
                    scrollTop: top
                }, 500);
            }
        }
    }
});​

Demo

答案 1 :(得分:1)

在这种情况下,我建议:

$('a[name*="rooftiles"]');

或者:

$('a[name~="rooftiles"]');

答案 2 :(得分:1)

如果我很好理解你的问题,也许你可以

  1. 找到包含div
  2. 首次出现的word
  3. 获取offsetTop
  4. 使页面滚动给定金额
  5. 这样的东西
    function jumpToWord(word) {
        var p = ($.browser.opera)? $("html") : $("html,body"),
            d = $("div:contains('" + word + "')").eq(0),
            offset = d.offset().top;
        p.animate({ scrollTop: offset }, 1000);
    }
    

    为了准确起见,如果您的文字包含在较短的段落中,则可能更适合搜索

    $("div p:contains('" + word + "')")