Ajax下拉搜索自动完成插件

发布日期： 2022-04-29

使用http://easyautocomplete.com/ 对couchcms的search表单进行改造。

效果图如下：

下面演示一个自定义搜索表单的代码结构，

<form id="search_form" method="get" action="<cms:link 'search.php' />">
    <input type="text" name="s" id="sss" value="请输入关键词" onfocus="if (document.forms['search_form'].sss.value === '请输入关键词') document.forms['search_form'].sss.value=''" onblur="if (document.forms['search_form'].sss.value == '') document.forms['search_form'].sss.value='请输入关键词'">
    <button type="submit">搜索</button>
</form>

Javascript代码如下：

<script>
    var options = {
       url: "<cms:show k_site_link />news_json.php",
       getValue: "name",
       highlightPhrase: false,
       list: {
          maxNumberOfElements: 500,
          match: {
             enabled: true
          },
          sort: {
             enabled: true
          }
       }
    };
    $("#sss").easyAutocomplete(options);
</script>

我们看到option选项需要一个json格式的数据源，不用担心，可以新建一个标签把想要搜索的项目生成我们需要的json格式

以新闻为例，创建一个news_json.php隐藏项目，只获取数据，代码如下：

<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='新闻Json' hidden='1' />
<cms:content_type 'application/json'/>
[
  <cms:pages masterpage='news.php'>
    {"name": "<cms:addslashes><cms:show k_page_title/></cms:addslashes>"}<cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
  </cms:pages>
]
<?php COUCH::invoke(); ?>

上面代码将会生成一个json格式的新闻列表供autocomplete插件调用。

Couchcms文档