AngularJs facebook wie erwähnt: wie zu erwähnen Vorschläge ohne das Trigger-Zeichen, z. '@'

Ich verwende eine Drittanbieter-Bibliothek mento.ioGithub für die Erfüllung meiner Anforderungen.AngularJs facebook wie erwähnt: wie zu erwähnen Vorschläge ohne das Trigger-Zeichen, z. '@'

Diese Bibliothek ist gut genug, um Vorschläge nach einem bestimmten Zeichen anzuzeigen, aber meine Anforderung ist, dass der Benutzer Vorschläge erhalten sollte, sobald er wie IntelliSense auf einem Editor zu tippen beginnt.

Problem

Wie den Vorschlag zu starten, wenn ein Benutzer ein beliebiges Zeichen trifft. Gerade jetzt seine einzige Arbeit mit @ Symbol

// Code goes here 
 

 

 
var app = angular.module('app', ['mentio']); 
 

 
app.controller('ctrl', function ($scope) { 
 

 
    $scope.people = [ 
 
     { label: 'Joe' }, 
 
     { label: 'Mike' }, 
 
     { label: 'Diane' } 
 
    ] 
 

 
    $scope.myval = ''; 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    
 
    
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 

 
\t <!-- Latest compiled and minified CSS --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
 
\t \t crossorigin="anonymous"> 
 

 
\t <!-- Optional theme --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
 
\t \t crossorigin="anonymous"> 
 

 
\t <!-- Latest compiled and minified JavaScript --> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
 
\t \t crossorigin="anonymous"></script> 
 
\t <!--<link rel="stylesheet" href="style.css" />--> 
 

 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
\t <script src="https://jeff-collins.github.io/ment.io/dist/mentio.js"></script> 
 
\t 
 
\t 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body><div ng-app="app" ng-controller='ctrl'> 
 

 
\t \t <input type="text" mentio id="test" mentio-id="'test'" mentio-typed-text="typedTerm" mentio-trigger-char="'@'" mentio-items="people" 
 
\t \t \t ng-model="myval" /> 
 
\t </div> 
 
    </body> 
 

 
</html>

Quelle

2016-12-23 Vikas Bansal

Verwenden Bootstrap typehead mit angualar –

Ich habe zu diesem git hub-Projekt gegangen, aber das ist meine Anforderungen nicht erfüllt, wie es nur Vorschläge für die gesamte Texteingabe String zeigt, aber ich möchte Vorschlag für jedes Wort wie Intellisence https://github.com/davidkonrad/angular-bootstrap3-typeahead –

Wenn Sie dies mit mentio.io lib, um herauszufinden, werfen Sie einen Blick auf diese Pull-Anforderung:

https://github.com/jeff-collins/ment.io/pull/94

Ich war das gleiche Problem mit mento.io konfrontiert und nur Framework geändert: https://leaverou.github.io/awesomplete

Quelle

2016-12-23 07:36:56

aber es schlägt vor, einmal pro Eingabe Textfeld. Ich möchte etwas wie "Intellisense". genau wie die Vorschläge kommen, wenn Sie Text-Editor eingeben –

, wenn Sie "Intellisense" benötigen, werfen Sie einen Blick auf diese Codepen: http://codepen.io/matt-west/pen/jKnzG –

oder wenn Sie nicht Dropdown: https : //designshack.net/articles/javascript/create-a-simple-autocomplete-with-html5-jquery/ –

mentio-trigger-char="''" scheint, scheint für mich ein wenig akward zu arbeiten, aber es funktioniert

// Code goes here 
 

 

 
var app = angular.module('app', ['mentio']); 
 

 
app.controller('ctrl', function ($scope) { 
 

 
    $scope.people = [ 
 
     { label: 'Joe' }, 
 
     { label: 'Mike' }, 
 
     { label: 'Diane' } 
 
    ] 
 

 
    $scope.myval = ''; 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    
 
    
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 

 
\t <!-- Latest compiled and minified CSS --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
 
\t \t crossorigin="anonymous"> 
 

 
\t <!-- Optional theme --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
 
\t \t crossorigin="anonymous"> 
 

 
\t <!-- Latest compiled and minified JavaScript --> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
 
\t \t crossorigin="anonymous"></script> 
 
\t <!--<link rel="stylesheet" href="style.css" />--> 
 

 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
\t <script src="https://jeff-collins.github.io/ment.io/dist/mentio.js"></script> 
 
\t 
 
\t 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body><div ng-app="app" ng-controller='ctrl'> 
 

 
\t \t <input type="text" mentio id="test" mentio-id="'test'" mentio-typed-text="typedTerm" mentio-trigger-char="''" mentio-items="people" 
 
\t \t \t ng-model="myval" /> 
 
\t </div> 
 
    </body> 
 

 
</html>

Quelle

2016-12-23 07:47:07 42tg

da ist ein Problem drin. Angenommen, Sie geben "j" ein und drücken "enter", dann wird der Text/das Wort "jjoe" anstelle von "joe" sein. –

Haben Sie bereits https://github.com/jeff-collins/ment.io/issues/58 gelesen? ? – 42tg

AngularJs facebook wie erwähnt: wie zu erwähnen Vorschläge ohne das Trigger-Zeichen, z. '@'

Antwort

Verwandte Themen