0

我想为 www.dictionary.com 上的条目实现一个非常类似于“附近单词”栏的功能。看起来是这样的：

例子

我的数据库有大约 47,000 个条目，所以我不认为一次加载它们是要走的路（但我可能是错的）。

有没有人对我应该如何实施这个有任何想法（或例子）？

感谢您的帮助，并希望大家度过一个愉快的假期周末！

编辑：到目前为止，我已经实现了一个带有自动完成功能的搜索栏，可以为搜索的单词提取正确的信息。例如，搜索“X”将生成一个包含 X 的定义、词性等的页面。我想要做的是在这个生成的页面上添加一个按字母顺序在 X 前后的单词滚动条。

4

2 回答 2

0

我认为您的问题与前端开发更相关，这就是为什么我认为您应该考虑使用 javascript 解决方案来实现此功能。

您可以使用 JQuery 自动完成插件和一个 html 字段。

你可以在这里找到一个例子：JQuery Autocomplete

并链接来自将查询数据库的 PHP 脚本的 JSON 输出。

在您的字段中至少有 2/3 个字符后，您将限制请求，并在文本字段中最后一次输入后一秒钟刷新它。

您可以在这里找到适合您需要的好教程：

使用 PHP/MySQL 的 JQuery 自动完成教程

编辑：

您可以实现的结果在这里（Javascript 代码）：

$(function() {
var words = [
  {
    value: "doe",
    label: "doe",
    desc: "additional description for doe",
  },
  {
    value: "doi",
    label: "doi",
    desc: "additional description for doi",
  },
  {
    value: "dog",
    label: "dog",
    desc: "additional description for dog",
  },
  {
    value: "dog catcher",
    label: "dog catcher",
    desc: "additional description for dog catcher",
  },  
  {
    value: "dog sitter",
    label: "dog sitter",
    desc: "additional description for dog sitter",
  }
];
$( "#word" ).autocomplete({
  minLength: 0,
  source: words,
  focus: function( event, ui ) {
    $( "#word" ).val( ui.item.label );
    return false;
  },
  select: function( event, ui ) {
    $( "#word" ).val( ui.item.label );
    $( "#word-id" ).val( ui.item.value );
    $( "#word-description" ).html( ui.item.desc )

    return false;
  }
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};
 });

使用自定义 JQuery 自动完成来工作 JSFiddle

于 2013-07-04T22:26:51.597 回答
0

首先，47K 条目可能很小也可能很大，具体取决于记录大小和服务器 (?) 当前负载。我建议你实现一个 SQL 查询（当然假设你有一个 SQL 数据库），它将检查用于LIKE特定列的相关建议。同样出于此目的，我建议您仅在用户按下 3 个（或类似的）字母后才开始搜索数据库，因为例如，如果他按下 1，您的服务器可能会产生很大的开销。

编辑：（评论摘要）

对于包含前 20 个词和后 20 个词的相关词的 Scrollbar，强烈建议在单个服务器调用中带入 40 个以上的词。

这是因为带来 20 或 200 的单个服务器调用将花费大致相同的时间，因为大部分时间通常用于将请求传递给服务器。请求服务器更小的范围，接近显示的范围将导致更多的服务器调用，因此更高的开销和更长的执行时间。

缓存未显示在客户端的结果并实现逻辑以在用户滚动到范围之外（或接近范围）时使用这些结果将导致执行更顺畅。

于 2013-07-04T22:21:06.400 回答