What I need to make http get on every textinput particularly AngularJS

Question

I would like to do http Get on every textfield particularly in my HTML ..

I need sending http GET when user typing something in actually focused textfield ..and in backend is making realtime searching DB for result (i ve got that function which use req.body for query text searching in mongo)...if searching text match something with DB it should show image from DB over textfield ..If I make it only for one textfield it should work...but do not know how to make it in some cycle or what ..without making GET method for every extra single textfield ..In future i would like to have dynamically raising textfields count when user pressed space and it create new empty input field.. My HTML should look like for beginin like :

  <div class="container">

        <br>
    <div class="row">
    <div class="col-sm-2 col-lg-2 col-xs-2">
    <img data-ng-src="data:image/png;base64,{{data}}"  width="100%"/>
        <br>
        <h1 style="color:#258cd1;"><input type="text" ng-   model="userInput.search"  class="text-center" style="border-width: 0px ;width:100%" > </h1>
      </div>
       <div class="col-sm-2 col-lg-2 col-xs-2">
    <img data-ng-src="data:image/png;base64,{{data2}}"  width="100%"/>
    <br>
        <h1 style="color:#258cd1;">  <input type="text" ng-model="userInput.search2" class="text-center" style="border-width: 0px ;width:99%"></h1>
</div>
    <div class="col-sm-2 col-lg-2 col-xs-2">
    <img data-ng-src="data:image/png;base64,{{data3}}"  width="100%"/>
    <br>
        <h1 style="color:#d62c1a;"> <input type="text" ng-model="userInput.search3"  class="text-center" style="border-width: 0px ;width:99%"></h1>
        </div>
        <div class="col-sm-2 col-lg-2 col-xs-2">
        <img data-ng-src="data:image/png;base64,{{data4}}"  width="100%"/>
        <br>
            <h1 style="color:#258cd1;"> <input type="text" ng-model="userInput.search4"  class="text-center" style="border-width: 0px ;width:99%"></h1>
        </div>
            <div class="col-sm-2 col-lg-2 col-xs-2">
           <img data-ng-src="data:image/png;base64,{{data4}}"  width="100%"/>
            <br>
            <h1 style="color:#d62c1a;"> <input type="text" ng-model="userInput.search9"  class="text-center" style="border-width: 0px ;width:99%"></h1>
        </div>
        <div class="col-sm-2 col-lg-2 col-xs-2">
            <img data-ng-src="data:image/png;base64,{{data4}}"  width="100%"/>
            <br>
            <h1 style="color:#258cd1;"> <input type="text" ng-model="userInput.search5"  class="text-center" style="border-width: 0px ;width:99%"></h1>
        </div>
     </div>

and in controller I ve got something like this ..but it works only for one field..

 $scope.$watch('userInput.search', function () {

            $http({
                url: '/imgskuska',
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                data: $scope.userInput
            }).success(function (response) {


                $scope.data = response;
            })

        })

What I need to do is call GET method (post is not good idea I think) with $scope.$watch in controller only on that textfield which is actually focused ..and user is typing in that something ..when the user focused on another textfield with tabKey make call from another input .. I need some advices how to do it ....thanks a lot ..

Pierre Maoui · Accepted Answer · 2016-04-30 12:48:34Z

1

I would avoid using $watch for this case and use ngChange instead. You can do this that way :

<input type="text" ng-model="field1" ng-change="search($event,field1)" />

with:

$scope.search = function(event,fieldValue) {
  // access to the input field : event.target
  // do the HTTP call with fieldValue
}

A better solution would be to create an angular directive to have a reusable component :

<my-input-with-autosearch ng-model="field1" />

answered Apr 30, 2016 at 12:48

Pierre Maoui

6,4522 gold badges31 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

strakz Over a year ago

Thanks...ng-change really looks like better solution for that ...but I am new to Angular ..and actually dont know what you mean to create own directive...what is better for ? ..what actually need to implement into it ? ..

Muli Yulzary Over a year ago

Directives are reusable viewmodel components that have their own logic independant of the view-model. also I'd recommend having a look at ui-bootstrap by the angular team. they have a directive implementation for typeahead. good luck!

strakz Over a year ago

Thanks but I really dont know what is it me for .... The post for every single field works well ..but How could I make that the response which is now set just for the first image ..will be pair with every inputfield on which actually writing something...? .. I mean this one line in controller .. $scope.data = response; How could I scope that data field ..?

Pierre Maoui Over a year ago

That concern of separation would be resolved with directives. This one line in your controller would be one line in a directive executed several times. Just learn how a directive works, it will be useful to you in many situations

Collectives™ on Stack Overflow

What I need to make http get on every textinput particularly AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related