zoukankan      html  css  js  c++  java
  • Joyo搜索框是如何完成中文自动填充的?

    今天跑到Joyo网去看看我需要的书到货没有,顺便搜索了一下其他书籍,我发现有自动填充,原来没有发现呢。汗颜。

    案例:

    如果我输入de,下面会有”德语“,”德川家康“等条目出现,伴随有多个搜索结果。

    问题:

    Joyo是怎么实现的呢?

    分析:

    当然我不可能看到其源代码和数据库schema。下面按照我自己的思路来解决这个问题。

    首先看看Joyo网的效果:

    • 当你输入"de",会出现以下结果:

             

             我们可以看到会出现以"de"发音的汉字,当然也包括英文。

    • 当输入"deyu"会是什么效果呢?看图:

             

           这是输入一整个”deyu"的拼音,所以下面都是以德语开头的,当然要是下面有“德育”的,也会显示的。

    • 看看输入"de yu"会是什么效果?我猜是没有结果。事实上也是:

            

            这说明是中间不能有空格的,除非“德语”是“德 语”,下面才有结果。

    从上面你能得出什么结论?

    我的结论是:

    • 拼音是按照汉语的顺序来的,如果有空格,那么拼音的相应位置也有空格。例如"德语"对应是"deyu","德 语"则是"de yu"。
    • 字母区分大小写的。

    既然有上面的结论,那么怎么去做呢?对于程序不大的,很简单,直接在数据库里设置。

    假设数据库里有一个表名叫item_t.之所以选择item,那是因为Joyo买书,卖CD等各种商品,所以不能以book_t来代替。

    item_t应该有如下字段:

    • id    每本书的id
    • price 每本书的价格
    • name 每本书的名字,是中文就是中文,是英文就是英文
    • name_alias 用来存储上面的拼音的。

    这里特别要介绍一下name_alias,这个field是关键。在录入的时候应该存储相应的拼音。按照一般习惯,英文书名应该存储英文。汉字的存储拼音。

    实现

    既然有了上面的分析,还有什么不能解决的呢。很明显要用到ajax技术。为了查找精确,应该到name,name_alias来2个field都查询。写一条SQL:

     SELECT id,name FROM item_t WHERE name LIKE "%keyword_you_search% OR name_alias LIKE '%keyword_you_search%'

    你也许会问,这里输出的是整个书名啊,和输出结果有出入。的确如此。

    那么Joyo到底是怎么做的?我猜想她将每个用户输入的关键字都存储起来的。这样在查询就方便一些。但是最终也不会离不开第一步。

    引申

    有人也许会问,你说的也太简单了吧,那么Google中国会怎么处理呢?我也不知道。

    单从Google首页来看,其实和joyo差不多。但是有个问题是Google应该不太会用SQL Server或Oracle等数据库的做法去存储,因为这非常不利于查询等操作。

    所以上面的name_alias可能行不通,不然每次都需要人工去输入,这得多大的功夫。唯一可能的就是自动去处理。

    如何处理呢?最差的一种就是将每个汉字的拼音都拿出来。相信这也不是什么难事,不然Google的输入法是怎么做出来的呢。

    接下来的事情怎么做,我想大家都知道。

    更多

    这里不介绍Ajax的使用方法,有人可能会提到没法输出中文,这些都是基本知识啦,这里不详述。

    最后欢迎大家拍砖。

    反馈

    从大家留言看,很多人非常关心性能问题.这与我当时写这篇文章的初衷有差距了.既然提到性能,我想我会在以后的文章中涉及到的.

  • 相关阅读:
    2018-10-20-WPF-通过位处理合并图片
    2019-2-11-WPF-获取应用的所有窗口
    2019-2-11-WPF-获取应用的所有窗口
    2018-8-10-WPF-如何在绑定失败异常
    2018-8-10-WPF-如何在绑定失败异常
    类和对象
    类和对象
    什么是可串行化MVCC
    LeetCode-环形链表|+环形链表||
    用js仿探探拖拽卡片的效果、飞卡片的效果,感觉挺酷,最后有美女看哦!
  • 原文地址:https://www.cnblogs.com/confach/p/1210798.html
Copyright © 2011-2022 走看看