Use xmlhttprequest function during text input instead of traditional form submission

Question

Use xmlhttprequest function during text input instead of traditional form submission

Is it possible to implement a search form xmlhttprequest that dynamically updates results as the user types, rather than requiring them to submit a form?

function customersController($scope, $http) {
  $scope.search = function() {
    $scope.url = 'http://www.vanmaram.com/json_result.php?en=' + $scope.keywords;
    $http.get($scope.url).
    success(function(data, status) {
      $scope.status = status;
      $scope.data = data;
      $scope.result = data; // Show result from server in <li> element
    }).
    error(function(data, status) {
      $scope.data = data || "Request failed";
      $scope.status = status;
    });
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-csp ng-controller="customersController">
  <form style="position:relative;" ng-submit="search()">
    <input type="search" placeholder="Type english word" ng-model="keywords">
    <input type="submit" value="Search">
  </form>
  <ul>
    <li ng-repeat="word in result | limitTo:9">{{ word }}</li>
  </ul>
</div>

javascript ajax angularjs forms xmlhttprequest

Answer 1

Answer №1

Hey there! Take a look at this demonstration on Plunkr: [link:http://plnkr.co/edit/6kuVR4?p=preview] I hope you find it helpful.

JavaScript

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.selected = "";
  $scope.countries = ["India", "Australia", "Japan"];
});

app.directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});

HTML Example

<body ng-controller="MainCtrl">
  <p>Countries {{countries|json}}!</p>
  <div ng-app="MyModule">
    <div>
      <input auto-complete="" ui-items="countries" ng-model="selected" />selected = {{selected}}
    </div>
  </div>
</body>

This example uses the jQueryUI library version 1.8.16 (jquery-ui.js).

Answer 2

Hey there! Take a look at this demonstration on Plunkr: [link:http://plnkr.co/edit/6kuVR4?p=preview] I hope you find it helpful.

JavaScript

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.selected = "";
  $scope.countries = ["India", "Australia", "Japan"];
});

app.directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});

HTML Example

<body ng-controller="MainCtrl">
  <p>Countries {{countries|json}}!</p>
  <div ng-app="MyModule">
    <div>
      <input auto-complete="" ui-items="countries" ng-model="selected" />selected = {{selected}}
    </div>
  </div>
</body>

This example uses the jQueryUI library version 1.8.16 (jquery-ui.js).

Answer 3

Answer №2

Using the ng-change attribute to trigger the same function as form submission

function customersController($scope, $http) {
  $scope.suggestword = function(argument) {
    $scope.url = 'http://www.vanmaram.com/ajax_json_suggestion.php?en=' + $scope.keywords; // The url of our search
    $http.get($scope.url).
    success(function(data, status) {
      $scope.status = status;
      $scope.data = data;
      $scope.suggetionresult = data; // Display result from server in <li> element
      $scope.result = null;
    }).
    error(function(data, status) {
      $scope.data = data || "Request failed";
      $scope.status = status;
    });
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-csp ng-controller="customersController">
  <form style="position:relative;" ng-submit="search()">
    <input type="search" placeholder="Type english word" ng-model="keywords" ng-change="suggestword()">
    <input type="submit" value="Search">
  </form>
  <ul ng-if='result.length'>
    <li ng-repeat="word in result | limitTo:9">{{ word }}</li>
  </ul>
  <div id="suggestion" ng-if='suggetionresult.length > 1'>
    Suggestions: <a ng-repeat="word in suggetionresult | limitTo:9">{{ word }}</a>
  </div>
</div>

Answer 4

Using the ng-change attribute to trigger the same function as form submission

function customersController($scope, $http) {
  $scope.suggestword = function(argument) {
    $scope.url = 'http://www.vanmaram.com/ajax_json_suggestion.php?en=' + $scope.keywords; // The url of our search
    $http.get($scope.url).
    success(function(data, status) {
      $scope.status = status;
      $scope.data = data;
      $scope.suggetionresult = data; // Display result from server in <li> element
      $scope.result = null;
    }).
    error(function(data, status) {
      $scope.data = data || "Request failed";
      $scope.status = status;
    });
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-csp ng-controller="customersController">
  <form style="position:relative;" ng-submit="search()">
    <input type="search" placeholder="Type english word" ng-model="keywords" ng-change="suggestword()">
    <input type="submit" value="Search">
  </form>
  <ul ng-if='result.length'>
    <li ng-repeat="word in result | limitTo:9">{{ word }}</li>
  </ul>
  <div id="suggestion" ng-if='suggetionresult.length > 1'>
    Suggestions: <a ng-repeat="word in suggetionresult | limitTo:9">{{ word }}</a>
  </div>
</div>

Use xmlhttprequest function during text input instead of traditional form submission

Answer №1

Answer №2

Similar questions

What is the best way to handle a JavaScript POST request in an ASP.NET WebForm?

Constructor not executing when using Object.create

Why doesn't WebStorm display TypeScript inspection errors in real-time?

Understanding the concept of event bubbling through the use of querySelector

Sending information from a modal to a separate page using AngularJS

Having trouble with $(document).ready not functioning correctly?

A guide to executing an HTTP request using Frida's JavaScript capabilities

What is the most effective way to attach an ng-click event to the final item in an ng-repeat loop

Obtaining a complete element from an array that includes a distinct value

Accessing child value in parent component using React.js

Switching Perspective on Live ExpressJS Path -- Node.JS

What is the most effective way to transfer parameters from an Angular controller or service to a server route and use them to query a

Tips for applying a jQuery class when the page is both scrolled and clicked

What is the best way to show a filtered list using a state that was created with useState in React?

Using Jquery for AJAX validation

What is the best way to implement a sidebar closing animation?

I am experiencing difficulty with my Glsl shaders not loading properly on either the Liveserver or Github pages

Breaking apart paragraphs in a text using JavaScript

A JointJS element with an HTML button that reveals a form when clicked

What is the Next.js equivalent of routing with rendering capability for nested component paths?