YUI 자동 제출 제안 제출

나는 YUI에서 자동 완료 기능을 구현했습니다. 하지만 사용자가 제안을 선택할 때, 양식이 제안YUI 자동 제출 제안 제출

<script> 
    YUI().use('array-extras','autocomplete','autocomplete-highlighters',function(Y) { 

     function locateModules(response) { 
      var results = []; 

      if(response && response.dimensions){ 
       for (var i = 0; i < response.dimensions.length; i++) { 
        if(response.dimensions[i] && response.dimensions[i].refinements){ 
         for (var j = 0; j < response.dimensions[i].refinements.length; j++) { 
          if(response.dimensions[i].refinements[j].refinements){ 
           results = results.concat(response.dimensions[i].refinements[j].refinements) 
          } 
          results.push(response.dimensions[i].refinements[j]); 
         } 
        } 
       } 
      } 

      return Y.Array.filter(results, function(result) { 
          //some other conditions 
       return true; 
      }); 
     } 

     Y.one('#searchId').plug(Y.Plugin.AutoComplete, { 
      resultHighlighter : 'phraseMatch', 
      resultListLocator : locateModules, 
      resultTextLocator : 'name', 
      source : '<%=autoCompleteURL%>&<portlet:namespace/>q={query}' 
     }); 
}); 
</script>

와 함께 제출해야 할 일은 싶습니다 나는이

<form ...> 
    <input name="searchId" id="searchId" placeholder="Search Product" /> 
    ...... 
</form>

자동 - 같은 양식을 가지고있는 제안이 제대로 이루어지고 있습니다. 사용자가 제안을 선택할 때

enter image description here

아래와 같이, 그것은 실제로 어떤 사용자가 입력됩니다에 관한 제안을 얻는다 다른 자동 제안 상자가있다 형태

에 제출해야한다 YUI 제안에서 오는 Orange color 텍스트/카테고리는 어떻게 그림과 같이 표시합니까?

<html> 
<body class="yui3-skin-sam"> 
    <div class="line"> 
    <div id="invoice-customer-id"> 
     <input type="text" value="x"/> 
    </div> 
    </div> 
    </body> 
</html>

자바 스크립트

출처

2013-12-23 Reddy

[This (http://stackoverflow.com/questions/4713987/yui-autocomplete-events-how-to)가 도움이 될 것입니다. 설명서에 따르면 사용자가 제안을 선택하면 "선택"이벤트가 시작됩니다. –

@sivatumma, 정말 제안을 선택하는 데 양식을 제출하는 데 도움이 감사합니다. 그러나 내 게시물 당 검색 제안을 어떻게 표시합니까? – Reddy

Check nout the following code. I have pasted HTML, JavaScript and CSS separately.

HTML 코드 [정제, 태블릿 케이스는 & 커버는 YUI에서 오는]

YUI().use('node', 'autocomplete', 'autocomplete-highlighters', 'autocomplete-filters', function (Y){ 
var node = Y.one('input'), 
    items = [0,1,2,3,4,5,6,7,8,9,'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'e', 'f']; 

node.plug(Y.Plugin.AutoComplete, { 
     height: '100px', 
     minQueryLength: 0, 
     scrollIntoView: true, 
     circular: false, 
     resultHighlighter: 'phraseMatch', 
     resultFilters: 'phraseMatch', 
     source: items, 
    on : { 
    select : function(e) { 
     console.log(arguments); //TODO: update your code 
    }} 
    }); 
}); // end of javascript

CSS

.line { 
overflow: hidden; 
/* position: relative; */ 
} 
.yui3-aclist-content { 
    overflow-y: auto; 
    } 
#invoice-customer-id { 
    padding: 8% 0; 
}

출처

2013-12-27 17:32:07 shivaP

죄송합니다. 여기에 붙여 넣은 것을 이해하지 못했습니다. 이미 자동 완성 기능을 구현했습니다. 내 질문을 확인 했니? – Reddy

@Reddy : 죄송합니다. java 스크립트 기능을 업데이트했습니다. 참조 : http : //jsfiddle.net/ACepn/60/ 및 http://stackoverflow.com/questions/4713987/yui-autocomplete-events-how-to – shivaP

감사합니다. 나는 그것을 구현했다. OP – Reddy

YUI 자동 제출 제안 제출

답변

관련 문제