输入框根据拼音首字母/中文字符联想补全

背景

在H5的输入框中，根据输入的拼音首字母/中文字符，到MySQL中查找相关关键词，进行提示补全。
如：
[BK]联想出：博客；播客；百科；博客群；博客网…
[博]联想出：博客；博士…

工具

• H5的datalist
• MySQL中中文转拼音首字母工具

实现

H5

<!-- 输入框带一个datalist，datalist的id要与input的list对应 -->
<input type="text" id="name" list="projectData" oninput="reloadDataList()"/>
<datalist id="projectData"></datalist>

function reloadDataList() {
	var nameval = $('#name').val();
	if ($('#name').val().trim().length != 0) {
		var pyflag = true;
		// 自定义后台查询的url（根据拼音联想）
		var targetUrl = "";
		if (/^[a-zA-Z]*$/.test(nameval)) {
			// do nothing
		} else if (/^[\u4e00-\u9fa5]*$/.test(nameval)) {
			pyflag = false;
			// 自定义后台查询的url（根据中文联想）
			targetUrl = "";
		}
		$.ajax({
			type: "get",
			url: targetUrl,
			data: {
				py: nameval
			},
			dataType: "json",
			success: function(data) {
				// 先清空datalist，再把查询到的联想词插入
				$('#projectData').empty();
				for (var o in data) {
					if (pyflag) {
						// 拼音联想出来，需要转成中文字符填入输入框
						$('#projectData').append("<option value='" + data[o].project + "'>" + data[o].py + "</option>");
					} else {
						$('#projectData').append("<option>" + data[o].project + "</option>");
					}
				}
			}
		});
	}
}

MySQL

因为单词联想具有高实时性，在MySQL中查询联想词时，如果遍历数据库时实时使用函数进行拼音首字母的转换，效率非常低。所以建立一张缓存表，把中文对应的拼音首字母缓存起来，查询时，直接查询缓存表即可。

创建中文转拼音函数

获取当前中文字符的拼音首字母

DROP FUNCTION IF EXISTS `fristPinyin`;
CREATE FUNCTION `fristPinyin`(PARAM VARCHAR(255)) RETURNS VARCHAR(2) CHARSET utf8
BEGIN
DECLARE V_RETURN VARCHAR(255);
DECLARE V_FIRST_CHAR VARCHAR(2);
SET V_FIRST_CHAR = UPPER(LEFT(PARAM,1));
SET V_RETURN = V_FIRST_CHAR;
IF LENGTH( V_FIRST_CHAR) <> CHARACTER_LENGTH( V_FIRST_CHAR ) THEN
SET V_RETURN = ELT(INTERVAL(CONV(HEX(LEFT(CONVERT(PARAM USING gbk),1)),16,10),
0xB0A1,0xB0C5,0xB2C1,0xB4EE,0xB6EA,0xB7A2,0xB8C1,0xB9FE,0xBBF7,
0xBFA6,0xC0AC,0xC2E8,0xC4C3,0xC5B6,0xC5BE,0xC6DA,0xC8BB,
0xC8F6,0xCBFA,0xCDDA,0xCEF4,0xD1B9,0xD4D1),
'A','B','C','D','E','F','G','H','J','K','L','M','N','O','P','Q','R','S','T','W','X','Y','Z');
END IF;
RETURN V_RETURN;
END

获取整个中文字符串的拼音首字母

DROP FUNCTION IF EXISTS `pinyin`;
CREATE FUNCTION `pinyin`(P_NAME VARCHAR(255)) RETURNS varchar(255) CHARSET utf8
BEGIN
DECLARE V_COMPARE VARCHAR(255);
DECLARE V_RETURN VARCHAR(255);
DECLARE I INT;
SET I = 1;
SET V_RETURN = '';
while I < LENGTH(P_NAME) do
SET V_COMPARE = SUBSTR(P_NAME, I, 1);
IF (V_COMPARE != '') THEN
#SET V_RETURN = CONCAT(V_RETURN, ',', V_COMPARE);
SET V_RETURN = CONCAT(V_RETURN, fristPinyin(V_COMPARE));
#SET V_RETURN = fristPinyin(V_COMPARE);
END IF;
SET I = I + 1;
end while;
IF (ISNULL(V_RETURN) or V_RETURN = '') THEN
SET V_RETURN = P_NAME;
END IF;
RETURN V_RETURN;
END

创建拼音缓存表&添加索引

此处主表名称：project
缓存表名称：word_to_pinyin

创建缓存表（缓存表兼具去重的功能）

drop table word_to_pinyin;
CREATE table word_to_pinyin
SELECT tmp.word,pinyin (tmp.project) as py FROM (
SELECT DISTINCT (pj.word) AS word FROM project pj) tmp

创建索引

CREATE INDEX INDEX_PY ON word_to_pinyin(py);
CREATE INDEX INDEX_PROJECT_WORD ON word_to_pinyin(word);

创建触发器（同步project到拼音缓存表中）

insert触发器

DROP TRIGGER if EXISTS TRIGGER_INSERT_PROJECT;
# 定义结束符
delimiter $$
# 在project表insert之后触发
create trigger TRIGGER_INSERT_PROJECT AFTER INSERT
on project for EACH ROW
BEGIN
# 如果缓存表里无数据，则生成对应的拼音首字母插入
IF NOT EXISTS (SELECT * FROM word_to_pinyin where word = NEW.word)
THEN INSERT INTO word_to_pinyin(word,py) VALUES(NEW.word,pinyin (NEW.word));
END IF;
END $$
# 还原结束符
delimiter ;

update触发器

DROP TRIGGER if EXISTS TRIGGER_UPDATE_PROJECT;
delimiter $$
create trigger TRIGGER_UPDATE_PROJECT AFTER UPDATE
on project for EACH ROW
BEGIN
IF NOT EXISTS (SELECT * FROM word_to_pinyin where word = NEW.word)
THEN INSERT INTO word_to_pinyin(word,py) VALUES(NEW.word,pinyin (NEW.word));
END IF;
END $$
delimiter ;

查询语句

select * from word_to_pinyin where py like 'BK%' LIMIT 0,10;
select * from word_to_pinyin where word like '博%' LIMIT 0,10;