Antonio Vasilev Antonio Vasilev - 4 months ago 13
Javascript Question

Angular: Extract keyword from user input - and display it

I would like to to allow the user to order the format of an address in whichever way he/she pleases.

For this, there will be an input in which the user would type in both keywords and regular text.

The idea is to detect when a keyword has been entered and extract that keyword from an object and then display it.

This is the object:

$scope.address = {
"addressline1": "Street Name",
"addressline2": "City and County",
"addressline3": "12",
"country": "United Kingdom",
"postcode": "XE12 2CV"
}


This is the markup:

<input ng-model='value' placeholder="address1, address2, address3, address4" type="text" />


The directive should allow any input in the text field - but - when a key word is entered as the 'value' then the script should grab that from the address object - and display it.

I am struggling to implement this.

Below is my JS.

(function() {
'use strict';
angular.module('testApp', [])
.controller('testController', hotelController)

function hotelController($scope, $http) {
var vm = this;
$scope.address = {
"addressline1": "Street Name",
"addressline2": "City and County",
"addressline3": "12",
"country": "United Kingdom",
"postcode": "XE12 2CV"
}
var regexMobile = /addressline[0-9]*$/;
var match = regexMobile.exec($scope.address);
var result = '';
var startPoint = 1;

if (match !== null) {
for (var i = startPoint; i < match.length; i++) {
if (match[i] !== undefined) {
result = result + match[i];
}
}
$scope.value = result;
}
}
})()


JSfiddle

Any help appreciated.

Answer

What I understood from your question is that you're trying to display a label based on what user types in the textbox.

Ex:

User types: "addressline1" so it should display "StreetName".

Then, if I'm correct, the below demo should work:

(function() {
  angular
    .module('testApp', [])
    .controller('testController', hotelController);

  hotelController.$inject = ['$scope'];

  function hotelController($scope, $http) {
    $scope.address = {
      "addressline1": "Street Name",
      "addressline2": "City and County",
      "addressline3": "12",
      "country": "United Kingdom",
      "postcode": "XE12 2CV"
    }

    $scope.change = function() {
      $scope.label = "";
      var values = $scope.value.split(", ");
      var i = 0;
      for (var key in $scope.address) {
        if (key == values[i]) {
          $scope.label += " " + $scope.address[key];
          i++;
        }
      }
    }
  }
})();
<!DOCTYPE html>
<html ng-app="testApp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="testController">
  <section class='container'>
    <h5>Type in keyword</h5>
    <p>Custom directive which filters out keywords from an object and outputs them as text</p>
    <input ng-model="value" placeholder="address1, address2, address3, address4" type="text" ng-change="change()" />
    <span ng-bind="label"></span>
  </section>
</body>

</html>

Comments