做php开发的都喜欢用phpmyadmin管理mysql，但是随着公司的数据库变多，想在下拉列表中肉眼找到目标服务器就变得很烦躁。
不如找一个下拉列表插件，把它变成一个支持模糊搜索的高级下拉列表吧。
Selectize.js插件
因为phpmyadmin的下拉列表就是一个巨长无比的<select><option></option>…</select>列表，所以只需要找一个JS插件来改造这个列表即可。
公司用的phpmyadmin的Jquery版本比较低，所以找了一个要求不高的插件：https://selectize.github.io/selectize.js/。
我们通过它的cdn地址下载如下2个文件：
- https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js
- https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css
改造phpmyadmin
放置前端资源：
- 把selectize.min.js放到js/selectize.min.js目录。
- 把selectize.default.min.css放到themes/pmahomme/css/selectize.default.css目录。
在phpmyadmin目录中grep搜索<title>，找到了phpmyadmin的<head>生成位置：libraries/Header.class.php。
在其中的private function _getLinkTags()函数中，引入css文件：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
private function _getLinkTags() { $retval = '<link rel="icon" href="favicon.ico" ' . 'type="image/x-icon" />' . '<link rel="shortcut icon" href="favicon.ico" ' . 'type="image/x-icon" />'; // stylesheets $basedir = defined('PMA_PATH_TO_BASEDIR') ? PMA_PATH_TO_BASEDIR : ''; $common_url = PMA_URL_getCommon(array('server' => $GLOBALS['server'])); $theme_id = $GLOBALS['PMA_Config']->getThemeUniqueValue(); $theme_path = $GLOBALS['pmaThemePath']; if ($this->_isPrintView) { $retval .= '<link rel="stylesheet" type="text/css" href="' . $basedir . 'print.css" />'; } else { $retval .= '<link rel="stylesheet" type="text/css" href="' . $basedir . 'phpmyadmin.css.php' . $common_url . '&nocache=' . $theme_id . $GLOBALS['text_dir'] . '" />'; $retval .= '<link rel="stylesheet" type="text/css" href="' . $theme_path . '/jquery/jquery-ui-1.9.2.custom.css" />'; } $retval .= '<link rel="stylesheet" type="text/css" href="./themes/pmahomme/css/selectize.default.css" />'; // $retval .= '<script type="text/javascript" src="./js/selectize.min.js"></script>'; return $retval; } |
然后在private function _addDefaultScripts()中引入了selectize.min.js：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
private function _addDefaultScripts() { $this->_scripts->addFile('jquery/jquery-1.8.3.min.js'); $this->_scripts->addFile('ajax.js'); $this->_scripts->addFile('keyhandler.js'); $this->_scripts->addFile('jquery/jquery-ui-1.9.2.custom.min.js'); $this->_scripts->addFile('jquery/jquery.sprintf.js'); $this->_scripts->addFile('jquery/jquery.cookie.js'); $this->_scripts->addFile('jquery/jquery.mousewheel.js'); $this->_scripts->addFile('jquery/jquery.event.drag-2.2.js'); $this->_scripts->addFile('jquery/jquery-ui-timepicker-addon.js'); $this->_scripts->addFile('jquery/jquery.ba-hashchange-1.3.js'); $this->_scripts->addFile('jquery/jquery.debounce-1.0.5.js'); $this->_scripts->addFile('jquery/jquery.menuResizer-1.0.js'); $this->_scripts->addFile('selectize.min.js'); |
PHP在生成header的时候，上述addFile最终在<head>里引入了这样一个PHP接口：
|
1 |
<script type="text/javascript" src="js/get_scripts.js.php?token=efa35435e9a9c5764fdc9c43fd61a33e&scripts[]=jquery/jquery-1.8.3.min.js&scripts[]=ajax.js&scripts[]=keyhandler.js&scripts[]=jquery/jquery-ui-1.9.2.custom.min.js&scripts[]=jquery/jquery.sprintf.js&scripts[]=jquery/jquery.cookie.js&scripts[]=jquery/jquery.mousewheel.js&scripts[]=jquery/jquery.event.drag-2.2.js&scripts[]=jquery/jquery-ui-timepicker-addon.js&scripts[]=jquery/jquery.ba-hashchange-1.3.js&scripts[]=jquery/jquery.debounce-1.0.5.js&scripts[]=jquery/jquery.menuResizer-1.0.js&scripts[]=selectize.min.js&scripts[]=cross_framing_protection.js&scripts[]=rte.js&scripts[]=tracekit/tracekit.js&scripts[]=error_report.js&scripts[]=doclinks.js&scripts[]=functions.js&scripts[]=navigation.js&scripts[]=indexes.js&scripts[]=common.js&scripts[]=codemirror/lib/codemirror.js&scripts[]=codemirror/mode/sql/sql.js&scripts[]=codemirror/addon/runmode/runmode.js"></script> |
该接口在PHP端合并所有这些JS资源，整体返回给前端。
仅仅引入资源还不够，需要在<select>标签后面调用插件来改造下拉框。
找到./libraries/select_server.lib.php文件，在function PMA_selectServer($not_only_options, $ommit_fieldset)末尾添加上这段代码：
|
1 2 3 4 |
$retval .='<script>$("#select_server").selectize({})</script>'; return $retval; } |
效果
现在就可以模糊搜索了：
如果文章帮助您解决了工作难题，您可以帮我点击屏幕上的任意广告，或者赞助少量费用来支持我的持续创作，谢谢~
