0

ユーザーを検索するためのオートコンプリートを実装しようとしています

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript"        src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>Insert title here</title>
<script type='text/javascript' src="js/jquery.autocomplete.js"></script
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />
<script type="text/javascript">
$(document).ready(function(){
        $('#search').keyup(function() { 
        var search  = $('#search').val();
         if(search.length>2){   
            $.ajax({
                 type:"POST",
                 url: "searchuser",
                 cache:false,
                 data: 'search=' + $("#search").val() ,
                 success: function(response){               
                    $.each(response, function (index, value) {
                            alert(value);
                     }
                    );
                 },
                error: function(e){
                 alert('Error: ' + e);
                 }
                });
         }
     });
 });
 </script>   
</head>
 <body>
 <form>
   <input id="search" type="text"  name="search" />
  </form>
  </body>
 </html>

私はデータベースから値を取得しており、アラートを使用して値をポップアップすることができますが、その値を使用してオートコンプリートを実装したいのですが、Spring MVC の例でどのようにできるかを教えてください。

4

1 に答える 1

2

上記のコードの代わりに、jqueryUI の自動競合機能を使用してください。必要なすべてのハンドルを提供します。

$( "#search" ).autocomplete({
  source: "searchuser",
  minLength: 3,
  select: function( event, ui ) {

    console.log( ui.item ?
      "Selected: " + ui.item.value + " aka " + ui.item.id :
      "Nothing selected, input was " + this.value );
  }
});

そしてサーバー側では、

@RequestMapping(value = "/searchuser", method = RequestMethod.GET)
public void searchUser(HttpServletResponse response,@RequestParam Map<String, String> params) {
    String jsonResponse = null;
    //Get params.get("term") --> It will be search criteria
    String jsonResponse= "[{\"fname\":\"atul\",\"userId\":1,\"name\":\"atul  kumar\",\"value\":\"atul  kumar\",\"label\":\"atul  kumar\"}]";                    
    response.setContentType("application/json");
    try {
        response.getOutputStream().print(jsonResponse);
    } catch (IOException e) {
        e.printStackTrace();
    }

}

PS: 返された JSON では、ラベルがドロップダウンに表示され、デフォルトで値が入力テキストに設定されるため、ラベルと値が重要です。他の値も使用できます (例のように)。select でさらに処理を行うことができます: functions(event,ui){}

疑いが晴れることを願っています。jqueryUI の API とデモも確認する必要があります。

于 2013-05-31T07:17:57.560 に答える