how to configure autocomplete search box to delete initial characters and not call the service

Question

my project requirement is to create an autocomplete search box which fetches data from elastic search . i will make it simple i have a textbox on which its onChange() event fires the autocomplete webservice and fetches the data. i am using 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;
    }


};

everything is working fine. dont go to other function calls. my problem is in this function.

so here is whats happening : 1.if i normally start typing everything works , i get the actucal and proper response as per keywords.

2.if i delete normally . i,e from last character to first it is working fine.

3.the problem case : if i had to remove the initial characters . eg my textbox word is java script. and i decide to remove the ending a from java . the service will be called with "jav script" which i dont want. this case should not case change function to fire.

this configuration i want in my autocomplete search textbox.

But the behavior you currently have is correct from user perspective, isn't it? — Episodex, Apr 07 '17 at 14:26
it is correct. but the problem is if the user has entered multiple words as a search query. ex "artificial neural network". and user decided to remove neutral from it. by starting deleting from the last character in "neural ". that is also a valid onChange event, it will cause no result to be fetched @Episodex — hannad rehman, Apr 07 '17 at 14:45
If you just don't want to trigger autocomplete then you can remember last entered phrase and compare it with new one. But I still don't think it's a way to go. What if user entered: "artificial neuralk network"? Now he wants to correct typo, removes "k" from "neuralk", but the search will not trigger. — Episodex, Apr 07 '17 at 14:50
@Episodex i am actually trying to replicate this https://unsilo.com/cases/showcase/smart-search/live this is word based suggestions and i am able to replicate it. but the only issue is deleting older words. — hannad rehman, Apr 07 '17 at 15:01
Their behavior there is also quite inconsistent. Generally it for sure triggers autocomplete when you change the middle word. But then it just ignores everything that is to the right of the cursor and looks like it sends only left side (first two words). But if you remove middle word completely and then move cursor to end it will be magically taken into account again, despite it's not there. http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field here you can see how to get cursor position and then write logic around this to your fitting. — Episodex, Apr 07 '17 at 15:25
it is quite inconsistent. i think this finding current cursor position is going to help in solving my problem. thanks mate :D @Episodex — hannad rehman, Apr 07 '17 at 15:31

score 0 · Answer 1 · answered Apr 07 '17 at 16:24

Did you expect like this.. ng-change not pass $event as variable.

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

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

i think this might actually work. but there is an issue with this methid also. not big one though.. i am already using ng-keydown to check up/down/backspace/escape/enter/tab keys for my autocomple suggestion list. and here keydown will be fired for all keys, there is going to be a huge processing to check for all keys, except the ones i am using — hannad rehman, Apr 12 '17 at 08:26

how to configure autocomplete search box to delete initial characters and not call the service

1 Answers1