我该怎么办?键入时优化搜索结果 [英] How could I do this? Refine search results as I type

问题描述

我的页面上有一堆缩略图和标题:

I've got a page with a bunch of thumbnails and titles:

http://thenozzle.net/games
(已损坏链接)

http://thenozzle.net/games
(broken link)

如果您点击搜索"，则搜索栏将从上方向下滑动.我可以在搜索框中输入内容，然后按Enter键以搜索网站.我想知道是否有办法查看所有缩略图，如果我键入"E"，它将隐藏除以"E"开头的缩略图以外的所有缩略图.然后，我键入"El"，它显示出所有以"El"开头的结果.然后，我添加了一个"d"，它将弹出每个以"Eld"开头的标题的缩略图.这样，用户无需重新加载即可轻松搜索游戏页面.是否有可能?值得吗?

If you hit "search", a search bar slides down from above. I can type things into the search box and hit enter to search the website. I was wondering if there was any way to look at all the thumbnails, and if I typed "E" it would hide all the thumbnails except for ones that started with "E". Then I typed "El" and it brought up every result that started with "El". Then I added a "d" and it would bring up every thumbnail with a title starting with "Eld". IN this, users could search the games page easily without having to reload. Is it possible? Worthwhile doing?

我精通jQuery和PHP.如果我的解释没有做到.查看 Google即搜即得.

I've well-versed in jQuery and PHP. If my explanation didn't do it. Look into Google Instant.

谢谢！

推荐答案

我前段时间做了类似的事情. 此处是链接.

I made something like this a while ago. Here's a link.

它的作用是在每次按键时触发此事件，并使所按下的键与包含它的li相匹配.它很好用，但肯定可以使用一些修改.这是代码:

What it does is fire this event on every key press, and matches the pressed key with a li that contains it. It works great, but could definitely use some modification. Here's the code:

$("#search").keyup(function(){
    $("li").hide();
   var term = $(this).val();
    $("li:contains('" + term + "')").show();
});

这篇关于我该怎么办?键入时优化搜索结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！