YUI Auto Complete Vorschlag mit Vorlage

Ich habe die Auto Complete-Funktion in YUI implementiert. Aber was würde Ich mag zu tun ist, wenn der Benutzer einen Vorschlag auswählt, sollte die FormYUI Auto Complete Vorschlag mit Vorlage

<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>

und ich habe Form

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

Die auto- wie diese
zusammen mit dem Vorschlag vorgelegt werden Vorschläge kommen richtig. Aber wenn der Benutzer wählt den Vorschlag, es sollte
Es gibt einem andere Autosuggestion Feld in der Form vorgelegt werden, das tatsächlich Vorschlag, was Benutzer verwendet wird, wie unten

gezeigt eingeben

enter image description here

Die Orange color Text/Kategorien aus YUI Vorschlag, wie zeige ich sie wie im Bild gezeigt. [Tablets, Tablet Cases & Covers kommen von YUI]

Quelle

2013-12-23 Reddy

[Dies] (http://stackoverflow.com/questions/4713987/yui-autocomplete-events-how-to) hilft ich hoffe. Die Dokumentation besagt, dass ein "Auswahl" -Ereignis ausgelöst wird, wenn der Benutzer einen Vorschlag auswählt. –

@sivatumma, danke, das hat mir wirklich geholfen, das Formular bei der Auswahl des Vorschlags einzureichen. Aber wie zeige ich die Suchvorschläge nach meinem Post an? – Reddy

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

HTML-Code

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

Java Skript

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; 
}

Quelle

2013-12-27 17:32:07 shivaP

Entschuldigung, ich habe nicht verstanden, was Sie hier eingefügt haben. Ich habe die Autovervollständigung bereits implementiert. Hast du meine Frage überprüft? – Reddy

@Reddy: Entschuldigung. Ich habe die Java Script Funktion aktualisiert. Als Referenz: http: //jsfiddle.net/ACepn/60/ und http://stackoverflow.com/questions/4713987/yui-autocomplete-events-how-to – shivaP

danke dafür. Ich habe es implementiert. Irgendeine Idee über meine zweite Frage in der OP – Reddy

Antwort

Verwandte Themen