Question

我正在开发一个项目，我正在使用Siyfion's angular Typeahead。我有一个Typeahead用于搜索用户。如果在建议下拉列表中找到用户名，您应该可以点击名称或按Enter键直接发帖，而不需要按下按钮进行发布。为此，我需要在其中一个用户名上“捕获”click-or-return事件。

下面你会找到它的html和js，我也做了一个plunker来使事情更加清晰。

有人知道如何捕捉点击和返回事件吗？欢迎所有提示！

<body ng-controller="MainCtrl">
    <input class='typeahead' type="text" sf-typeahead options="exampleOptions" datasets="numbersDataset" ng-model="selectedName">
    <input type="button" value="Post user to server" type="text" ng-click="postUserToServer(selectedName.id)">
</body>

这是JS代码：

var app = angular.module('plunker', ['siyfion.sfTypeahead']);

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

    $scope.selectedNumber = null;

    // instantiate the 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 the 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);
    };
});

Answer 1

Typeahead支持自定义事件，您可以将其绑定到函数以自动提交表单。您可以查看文档here.

中提供的所有自定义事件

以下是一个例子：

$('.typeahead').bind('typeahead:select', function(ev, suggestion) {
  console.log('Selection: ' + suggestion);
});

以上代码＆＃34;打字：选择＆＃34;将函数绑定到事件。当点击建议时，或者当返回键被点击并且建议被高亮显示时，这将触发。

从这里你可以在你的功能中做任何你想做的事情，所以在你的情况下你想提交搜索。老实说，我并不熟悉Angular，所以我不确定实际提交搜索的正确语法是什么。但是，您可以使用jQuery中的.trigger()方法触发点击搜索按钮;虽然我很欣赏这有点hacky，我确信有一种更优雅的方式来提交搜索。

Answer 2

Siyfion的插件似乎没有足够的关于事件处理的文档。尝试使用此插件[https://github.com/borntorun/angular-typeaheadjs]

他们有关于事件处理的非常好的文档，这是专门针对AngularJS的。他们的文档中的示例：

<angular-typeaheadjs angty-onselect="vm.onselect" ...>
  <input class="typeahead" type="text" ... />
</angular-typeaheadjs>

//on the controller
vm.onselect = function() {
  //do something 
}

或者您可以简单地说：

$scope.$on('typeahead:select', function() {
  //Your post code goes here....
});

希望这有帮助！

Angular Typeahead：点击建议并立即发帖？

2 个答案: