Jquery自動補全插件的使用

1、引入css和js 

 

<script src="js/jquery-ui.min.js"></script>

<link href="css/jquery-ui.min.css" rel="stylesheet">

下載地址

https://github.com/xiaorenwu-dashijie/autocomplete.git

2、寫input輸入框，主要是觸發onkeyup事件

<input type="text" class="form-control" id="instiName" name="instiName" onkeyup="findInstiNamesByValue()" placeholder="請輸入機構名稱" >

 

3、寫方法

function findInstiNamesByValue(){

var instiName = $("#instiName").val();  //獲取輸入框內容

$( "#instiName" ).autocomplete({

    source: '${pageContext.request.contextPath}/findInstiNamesByValue?instiName='+instiName,  //請求的url

    minLength: 1,

  });

}

 

注意：jquery中autocomplete方法需要的響應數據是json類型的數組

4、后台代碼

a、Controller

/**

 * 添加數據修復申請時，通過模糊查詢自動補全機構名稱

 *

 * @param instiName

 *            輸入框中的內容

 * @return

 */

@RequestMapping("/findInstiNamesByValue")

public @ResponseBody String[] findInstiNamesByValue(String instiName) {

List<String> instiNames = instiDetailService.findInstiNamesByValue("%" + instiName.trim() + "%");

if (CollectionUtils.isEmpty(instiNames)) {

return null;

}

int size = instiNames.size();

String[] arr = (String[]) instiNames.toArray(new String[size]);

return arr;

}

 

b、Service

/**

 * 根據輸入框中的漢字查詢機構名從而實現自動補全功能

 *

 * @param instiName

 * @return

 */

List<String> findInstiNamesByValue(String instiName);

 

 

c、Service.impl

@Override

public List<String> findInstiNamesByValue(String instiName) {

List<String> instiNames = instiDetailMapper.findInstiNamesByValue(instiName);

return instiNames;

}

 

d、Mapper

/**

 * 根據輸入框中的漢字查詢機構名從而實現自動補全功能

 *

 * @param instiName

 * @return

 */

 

@Select(" select insti_name from insti_detail where insti_name LIKE #{instiName}")

List<String> findInstiNamesByValue(String instiName);

 

PS：不用注解的話，可以用Mapper.xml

<select id="findInstiNamesByValue" resultType="java.lang.String" parameterType="java.lang.String" >

    select insti_name

    from insti_detail

    where insti_name LIKE #{instiName}

  </select>

 

5、（模態框）自動補全問題解決

不使用模態窗的時候，autocomplete可以很好的工作，使用模態窗時彈出的選擇菜單會被模態窗遮擋。

在文件中添加了下面一段CSS代碼，終於成功解決。

 

<style type="text/css">

    .ui-autocomplete{

        display:block;

        z-index:99999;

    }

</style>