자동 완성

내가 어떤 자동 완성 내가 서버 측에서 객체 [{"email":"[email protected]","name":"marie"},{"email":"[email protected]","name":"miss"}]의 배열을 가지고자동 완성

값을 참조하지 말아 입력 텍스트 상자를 채울한다.

3 개의 입력 필드가 있습니다. 1) 선택 태그 2) 입력 텍스트입니다. select 태그의 객체 배열에서 일치하는 모든 name 속성 문자열을 자동 완성하려고합니다. 이름 값 중 하나를 선택하면 marie에 대해 말합니다. 선택한 값은 자동으로 이메일 즉, marie @ gmail.com을 가져 와서 입력 텍스트로 채 웁니다.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
<script src="https://code.jquery.com/jquery-1.10.2.js" 
    type="text/javascript"></script> 
<link 
    href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" 
    rel="Stylesheet" type="text/css" /> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js" 
    type="text/javascript"></script> 
</head> 
<script type="text/javascript"> 
    function handleAutocomplete(request) { 
     $.ajax({ 
      url : 'getAdvocate.jsp?q=' + request.term, 
      dataType : "json", 
      type : "POST", 
      contentType : "application/json; charset=utf-8", 
      success : function(data) { 
       // use 'term' for custom filtering etc. 
       var options = $.grep(data, function(e) { 
        return e.name.startsWith(request); 
       }); 
       return options; 
      }, 
      error : function(response) { 
       //alert(response.responseText); 
      }, 
      failure : function(response) { 
       //alert(response.responseText); 
      } 
     }); 

    } 
    $(function() { 
     $("#name").autocomplete({ 
      minLength : 0, 
      delay : 0, 
      scroll : true, 
      autofocus : true, 
      source : function(request, response) { 
       var data = handleAutocomplete(request); /* get answers from somewhere.. */ 
      }, 
      focus : function(event, ui) { 
       $("#name").val(ui.item.name); 
       return false; 
      }, 

      select : function(event, ui) { 
       $("#name").val(ui.item.name); 
       $("#email").val(ui.item.email); 
       return false; 
      } 
     }).autocomplete("instance")._renderItem = function(ul, item) { 
      return $("<li>") 
      //.append("<a>" + item.name + "<br>" + item.email + "</a>") 
      .append("<a>" + item.name + "</a>").appendTo(ul); 
     }; 
    }); 
</script> 
<body> 
    <input id="name" type="text" class="form-control" /> 
    <input id="email" type="text" class="form-control" /> 
    <input id="mobile" type="text" class="form-control" /> 
</body> 
</html>

출처

2016-06-26 Ajay Takur

당신은 다음과 같이 할 수 있습니다 :

$(function() { 
    var users = [{ 
     "email": "[email protected]", 
     "name": "marie" 
    }, { 
     "email": "[email protected]", 
     "name": "miss" 
    }]; 

    function handleAutocomplete(term) { 
     // use 'term' for custom filtering etc. 
     var options = $.grep(users, function(e) { 
      return e.name.startsWith(term); 
     }); 
     return options; 
    } 
    $("#name").autocomplete({ 
     minLength: 0, 
     source: function(request, response) { 
      var name = request.term; 
      var data = handleAutocomplete(name); /* get answers from somewhere.. */ 
      response(data); 
     }, 
     focus: function(event, ui) { 
      $("#name").val(ui.item.name); 
      return false; 
     }, 

     select: function(event, ui) { 
      $("#name").val(ui.item.name); 
      $("#email").html(ui.item.email); 
      return false; 
     } 
    }).autocomplete("instance")._renderItem = function(ul, item) { 
     return $("<li>") 
      .append("<a>" + item.name + "<br>" + item.email + "</a>") 
      .appendTo(ul); 
    }; 
});

또는

$(function() { 
    $("#name").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: 'getAdvocate.jsp?q=' + request.term, 
       data: "", 
       dataType: "json", 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       success: function(data) { 
        response(data); 
       }, 
       error: function(response) { 

       }, 
       failure: function(response) { 

       } 
      }); 
     }, 
     select: function(e, i) { 

     }, 
     minLength: 1 
    }); 
});

접두사 일치 :

https://jsfiddle.net/duoc5bbh/1/

,369을

일치하는 : 당신의 JSP 페이지에

https://jsfiddle.net/duoc5bbh/2/

출처

2016-06-26 08:38:59

이슬람처럼 내가 'M'유형 I 돈 그 이메일을 원한다. 단지 자동 완성 선택 상자에 그 이름 만 넣고 싶다. –

이름의 첫 문자뿐만 아니라 단어의 중간 부분을 검색해야합니다. –

당신이 그것을 관리 할 수 있었으면 좋겠지 만 여전히 귀하의 요구 사항이 충족되도록 내 대답을 업데이트 중입니다 :) –

<% 
    String q= request.getParameter("q"); 
    // then do you sql query with Like '%q%' then it will work as exactly you want 
%>

및 JSON 응답을 반환이어야합니다

var users = [{ 
    "email": "[email protected]", 
    "name": "marie" 
}, { 
    "email": "[email protected]", 
    "name": "miss" 
}]; 

$(function() { 

    $("#name").autocomplete({ 
     minLength: 0, 
     source: function(request, response) { 
      $.ajax({ 
      url: 'getAdvocate.jsp?q=' + request.term, 
      data: "", 
      dataType: "json", 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      success: function(data) { 
       response(data); 
      }, 
      error: function(response) { 

      }, 
      failure: function(response) { 

      } 
      }); 
     }, 
     focus: function(event, ui) { 
      $("#name").val(ui.item.name); 
      return false; 
     }, 

     select: function(event, ui) { 
      $("#name").val(ui.item.name); 
      $("#email").html(ui.item.email); 
      return false; 
     } 
    }).autocomplete("instance")._renderItem = function(ul, item) { 
     return $("<li>") 
      .append("<a>" + item.name + "<br>" + item.email + "</a>") 
      .appendTo(ul); 
    }; 
});

출처

2016-06-28 05:40:55

토큰 구문 오류 ".", : : 예상 됨 at line $ .ajax ({ –

} 작동하지 않습니다 ... –

변경 사항을 확인하고 –

답변

관련 문제