2010-01-04 7 views
1

Struts2 응용 프로그램에 대해 jQuery 자동 완성을 사용했습니다.Struts2 + jQuery 자동 완성

사실, 제 조치는 jQuery에서 사용하는 문자열 목록을 작성했습니다. 이 스크립트는 다음과 같습니다.

$().ready(function() { 
     $("#tag").autocomplete("/myAction/Action", { 
      multiple : true, 
       autoFill : true, 
        minChars:1 
       }); 
      }); 

입력하는 동안 제안 사항이있는 상자가 나타납니다. 문제는 박스가 다른 값을 렌더링한다는 것입니다. 은 자동으로 JSP의 코드를 렌더링합니다 (자동 완성 플러그인의 CSS 링크).

어떻게 해결할 수 있습니까?

내 JSP입니다 : 이제

<html> 
<head> 
    <script src="<%=request.getContextPath()%>/scripts/jquery-latest.js"></script> 
    <link rel="stylesheet" href="<%=request.getContextPath()%>/scripts/main.css" type="text/css" /> 
    <link rel="stylesheet" href="<%=request.getContextPath()%>/scripts/jquery.autocomplete.css" type="text/css" /> 
    <script type="text/javascript" src="<%=request.getContextPath()%>scripts/jquery.bgiframe.min.js"></script> 
    <script type="text/javascript" src="/<%=request.getContextPath()%>/query.dimensions.js"></script> 
    <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.autocomplete.js"></script> 
    <script type="text/javascript"> 
    $().ready(function() { 
     $("#tag").autocomplete("/myAction/Action", { 
      multiple : true, 
       autoFill : true, 
        minChars:1 
       }); 
      }); 
</script> 
</head> 
<body> 
    <s:form action="Action" theme="simple"> 
     <s:iterator value="elencoMateriali" var="asd"> 
      <s:property value="#asd" escape="false"/> 
        </s:iterator> 
     <s:textfield id="tag" name="tagField" label="tag" /> 
    </s:form> 
</body> 

+2

문제에 대한 해결책을 찾는 동안 자동 완성을위한 다른 방법을 찾았습니다. Struts2 및 Dojo. http://www.benmccann.com/dev-blog/struts-2-ajax-tutorial-dojo-autocompleter-example/ –

답변

0
<%@ taglib prefix="s" uri="/struts-tags" %> 
    <%@ taglib prefix="sx" uri="/struts-dojo-tags" %> 

<s:form action="ActionJson" theme="simple"> 
    <s:url id="elencoFuffa" action="ActionJSON"/> 
    <sx:autocompleter id="autocompleter" name="materiale" loadOnTextChange="true" preload="false" href="%{elencoFuffa}" size="24" loadMinimumCount="1" showDownArrow="false" cssClass="dropDown" onchange="submit();"/> 

     <s:submit value="Prosegui"/> 
     <s:property value="luoghiSmaltimento"/> 
    </s:form> 

, 동작 : 끝에

public class Action extends ActionSupport { 

private String materiale; 
private String luoghi; 
private List<String> elencoMateriali; 
private Map<String, String> json; 

public String execute() throws Exception { 

    System.out.println("------------------" + materiale); 

    return SUCCESS; 
} 

public String getMateriali() throws Exception { 
    MaterialiDAO dao = new MaterialiDAO(); 
    List<Materiali> toResult = new ArrayList<Materiali>(); 
    toResult = dao.findAll(); 
    elencoMateriali = new ArrayList<String>(); 
    Iterator i = toResult.iterator(); 

    while (i.hasNext()) { 
     Materiali m = (Materiali) i.next(); 
     elencoMateriali.add(m.getValueNomemateriale()); 
    } 

    return SUCCESS; 

} 

public String getJson() throws Exception { 
    json = new HashMap<String, String>(); 

    if (materiale != null && materiale.length() > 0) { 
     MaterialiDAO dao = new MaterialiDAO(); 
     List<Materiali> materiali = dao.findByLikeValue(materiale); 
     for (Materiali m : materiali) { 
      json.put(m.getValueNomemateriale(), "" + m.getIdMateriali()); 
     } 
    } 

    return SUCCESS; 
} 

public String trovaLuogo() throws Exception { 
    LuoghismalDAO daoL = new LuoghismalDAO(); 
    MaterialiDAO daoM = new MaterialiDAO(); 
    Materiali m = daoM.findByMaterialiName(materiale); 

    if (m != null) { 
     luoghi = m.getLuoghismal().getValueDescrluogo(); 

     return SUCCESS; 

    } else { 
     luoghi = "-- Scegliere un materiale --"; 
     return SUCCESS; 
    } 
} 

/* Getters and setters */ 

struts.xml

 <action name="ActionJSON" class="it.action.Action" 
     method="getJson"> 
     <result type="json"> 
      <param name="root">json</param> 
     </result> 
    </action> 
1

나는 대답하기에는 너무 늦었다 고 생각하지만, 여전히 Struts2에 남아있다. 이러한 문제를 해결하기 위해 몇 가지 수정을했습니다.

  1. jquery.struts2.js 파일을 js 경로에 복사합니다.

  2. 편집 jquery.struts2.js FIL 및 찾아 성공 : 기능 (데이터) '를 Autocompleter에 위젯의 핸들을하고 다음의 기능을 대체 :

    success: function(data) { 
    var x = 0; 
    if (data[o.list] !== null) { 
        var isMap = false; 
        if (!$.isArray(data[o.list])) { 
         isMap = true; 
        }         
        var result = []; 
        $.each(data[o.list], function(j, val) { 
         if (isMap) { 
          result.push({ 
           label: val.replace(
             new RegExp(
               "(?![^&;]+;)(?!<[^<>]*)(" + 
               $.ui.autocomplete.escapeRegex(request.term) + 
               ")(?![^<>]*>)(?![^&;]+;)", "gi" 
              ), "<strong>$1</strong>"), 
           value: val, 
           id: j 
          }); 
         } 
         else { 
          if (o.listkey !== undefined && o.listvalue !== undefined) { 
           result.push({ 
            label: val[o.listvalue].replace(
              new RegExp(
                "(?![^&;]+;)(?!<[^<>]*)(" + 
                $.ui.autocomplete.escapeRegex(request.term) + 
                ")(?![^<>]*>)(?![^&;]+;)", "gi" 
               ), "<strong>$1</strong>"), 
            value: val[o.listvalue], 
            id: val[o.listkey] 
           }); 
          } 
          else { 
           result.push({ 
            label: data[o.list][x].replace(
              new RegExp(
                "(?![^&;]+;)(?!<[^<>]*)(" + 
                $.ui.autocomplete.escapeRegex(request.term) + 
                ")(?![^<>]*>)(?![^&;]+;)", "gi" 
               ), "<strong>$1</strong>"), 
            value: data[o.list][x], 
            id: data[o.list][x] 
           }); 
          } 
         } 
         x++; 
        }); 
        response(result); 
    } 
    

    }

  3. 이제 jsp 코드에서 onSelectTopics 메소드를 등록하면 사용할 수있는 새 item.id 요소가 생기므로 원하는 값으로 숨겨진 값으로 id 값을 설정할 수 있습니다.

지금, 당신의 Autocompleter에가 강한 단어 목록이 표시, 선택과 입력을 채우고, 당신이 잡을 수있는 변수에 ID를 mantains.

수정 된 js를 include 헤더 섹션에 추가해야합니다.

+0

와우! 많은 것들 ..하지만 최근에 나는이 http://code.google.com/p/struts2-jquery/을 사용했습니다. 도장보다 훨씬 더 .. –