如何配置自动填充搜索框以删除初始字符而不是调用服务

时间:2017-04-07 13:57:52

标签: javascript angularjs autocomplete

我的项目要求是创建一个自动填充搜索框,用于从弹性搜索中获取数据。 我将使它变得简单我有一个文本框,其onChange()事件触发自动完成Web服务并获取数据。我正在使用angularjs 1.6。

<input type="text" ng-change="fetchTags ()" ng-model="autocompleteData.text"/>

的javascript

$this.fetchTags = function() {
    try {
        //remove special chars/
        $this.autoCompleteData.text = purgerFilter($this.autoCompleteData.text);
        //cancel previous timer;
        if (autoCompleteTimer) {
            $timeout.cancel(autoCompleteTimer);
        }
        //to avoid late response display suggesion list
        $this.autoCompleteData.hasEmitted = false;
        var txt = $this.autoCompleteData.getText();
        if (typeof txt !== undefined) {
            //200ms debounce.
            var time = 200;
            if (txt.length > 0) {
                autoCompleteTimer = $timeout(function() {
                    $this.autoCompleteData.newTag = undefined;
                    initiateGetTopicTagsFromWebService();
                }, time);
            } else {
                $this.autoCompleteData.setIsVisible(false);
            }
        }
    } catch (e) {
        throw e;
    }


};
一切都运转良好。别去其他函数调用。我的问题在于这个功能。

所以这里发生了什么: 1.如果我通常开始输入所有内容,我会按照关键字获得主动和适当的响应。

2.如果我正常删除。我,从最后一个角色到第​​一个它工作正常。

3.问题案例:如果我必须删除初始字符。例如我的文本框单词是java脚本。我决定从java中删除结尾a。该服务将使用“jav script”调用,我不想要。这种情况不应该是案件改变功能。

我希望在我的自动填充搜索文本框中使用此配置。

1 个答案:

答案 0 :(得分:0)

你有没有想到这样的.. ng-change未将$event作为变量传递。

&#13;
&#13;
angular.module("myapp", [])
            .controller("MyController", function($scope) {
               $scope.checkWord = "";

                $scope.myData = function(event) {
                 //  console.log(event);
                  if(event.keyCode == 8 || event.keyCode == 46){
                  // console.log(event);
                  if(event.srcElement.selectionEnd == $scope.checkWord.length || event.srcElement.selectionStart == $scope.checkWord.length){
                  $scope.msg="I'm going to call the function ";
                 
                  }else{
                   $scope.msg="I'm not going to call the function ";
                  }
}
}
            } );
&#13;
<html><head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script></head>
<body ng-app="myapp">
<div ng-controller="MyController" >
    <input type="text" ng-model="checkWord" ng-keydown="myData($event)"/>
    <br><br>{{msg}}
</div>
</body>
</html>
&#13;
&#13;
&#13;