javascript - Angular Typeahead: click on suggestion and instantly make a post? -
i working on project , i'm using siyfion's angular typeahead. have typeahead searching users. when username found in suggestions dropdown should able click on name or press enter directly make post instead of needing press button post. work need "catch" click- or return-event on 1 of user names.
below find html , js , made plunker makes things more clear.
does know how can catch click , return events? tips welcome!
<body ng-controller="mainctrl"> <input class='typeahead' type="text" sf-typeahead options="exampleoptions" datasets="numbersdataset" ng-model="selectedname"> <input type="button" value="post user server" type="text" ng-click="postusertoserver(selectedname.id)"> </body> here js code:
var app = angular.module('plunker', ['siyfion.sftypeahead']); app.controller('mainctrl', function($scope) { $scope.selectednumber = null; // instantiate bloodhound suggestion engine var numbers = new bloodhound({ datumtokenizer: function(d) { return bloodhound.tokenizers.whitespace(d.name); }, querytokenizer: bloodhound.tokenizers.whitespace, local: [ { name: 'john',id: 1 }, { name: 'richard', id: 2 }, { name: 'dennis', id: 3 } ] }); // initialize bloodhound suggestion engine numbers.initialize(); $scope.numbersdataset = { displaykey: 'name', source: numbers.ttadapter() }; // typeahead options object $scope.exampleoptions = { highlight: true }; $scope.postusertoserver = function(userid){ alert(userid); }; });
typeahead supports custom events can bind function automatically submit form. can view of custom events available in docs here.
here's example:
$('.typeahead').bind('typeahead:select', function(ev, suggestion) { console.log('selection: ' + suggestion); }); the above code "typeahead:select" binds function event. fire when suggestion clicked on, or when return key hit , suggestion hightlighted.
from here can want inside function, in case you'd want submit search. i'm not familiar angular i'm not sure correct syntax submit search. use .trigger() method in jquery trigger click on search button; although appreciate bit hacky , i'm sure there more elegant way submit search.
Comments
Post a Comment