输入框根据拼音首字母/中文字符联想补全
背景工具实现H5MySQL创建中文转拼音函数创建拼音缓存表&添加索引创建触发器（同步project到拼音缓存表中）查询语句背景
在H5的输入框中，根据输入的拼音首字母/中文字符，到MySQL中查找相关关键词，进行提示补全。
如：
[BK]联想出：博客；播客；百科；博客群；博客网…
[博]联想出：博客；博士…
工具
H5的datalistMySQL中中文转拼音首字母工具实现
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 utf8BEGINDECLARE 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 ) THENSET 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 utf8BEGINDECLARE V_COMPARE VARCHAR(255);DECLARE V_RETURN VARCHAR(255);DECLARE I INT;SET I = 1;SET V_RETURN = '';while I < LENGTH(P_NAME) doSET 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 = '') THENSET V_RETURN = P_NAME;END IF;RETURN V_RETURN;END
创建拼音缓存表&添加索引
此处主表名称：project
缓存表名称：word_to_pinyin
创建缓存表（缓存表兼具去重的功能）
drop table word_to_pinyin;CREATE table word_to_pinyinSELECT 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 INSERTon project for EACH ROWBEGIN# 如果缓存表里无数据，则生成对应的拼音首字母插入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 UPDATEon project for EACH ROWBEGINIF 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;
