Autocomplete textbox with two dropdowns - javascript

I have one dropdown for country, another dropdown for cities and an autocomplete textbox for places.
When I select country in the first dropdown it shows cities list for that particular country in the second dropdown.
Next I want to show the places list under the selected city in the autocomplete textbox.
I have one local JSON file, html page and JavaScript file. The HTML code goes as follows:
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="js/json4update.js">
< script type = "text/javascript"
src = "js/textauto.js" >
</script>
</head>
<body>
<div ng-controller="MyController">
<select ng-model="Countryselected" ng-options=" coun.country for coun in country" ng-change="getCity()">
<option value="">Select</option>
</select>
<select ng-model="cityselect" ng-options=" c.name for c in Citydetails " ng-disabled="!Countryselected">
<option value="">Select</option>
</select>
<input id="tags" ng-model="placeselected" ng-keyup="complete()" placeholder="Type place name" ng-disabled="!cityselect" />
</div>
</body>
</html>
Here goes my .js file, here is the problem I guess. I am not able to use JS function on required place.
var app = angular.module('myApp', []);
app.controller('MyController', function ($scope, $http) {
$http.get("file2update.json").success(function (data) {
$scope.country = data.records;
$scope.getCity = function () {
$scope.Citydetails = $scope.Countryselected.cities;
$scope.places = $scope.cityselect.place;
}
});
$scope.complete = function ()
{
$("#tags").autocomplete({
source: $scope.placeselected
});
}
});
Here is my JSON file .
{
"records": [{
"cities": [{
"name": "patna",
"place": [
"p1",
"p2",
"p3"]
}, {
"name": "delhi",
"place": [
"d1",
"d2"]
}],
"country": "india"
}, {
"cities": [{
"name": "Australia1",
"place": [
"A1",
"A2",
"A3"]
}, {
"name": "Australia2",
"place": [
"a11",
"a22",
"a33"]
}],
"country": "Australia"
}]
}

Related

Alpaca title change won't take effect post refresh

I've been trying to slightly modify the observables example found in the docs. Instead of having different enums according to user's choice in the radio button, I want the field below to change the title.
Here's a running fiddle for that.
And the following the code snippet so far:
var teams = {
"None": "None",
"Milwaukee": "Milwaukee",
"Cleveland": "Cleveland",
"Boston": "Boston"
};
$("#form1").alpaca({
"schema": {
"type": "object",
"properties": {
"city": {
"title": "Pick a City",
"type": "string",
"enum": ["Milwaukee", "Cleveland", "Boston"]
},
"team": {
"title": "nothing yet",
"type": "string",
}
}
},
"postRender": function(control) {
var city = control.childrenByPropertyId["city"];
var team = control.childrenByPropertyId["team"];
team.subscribe(city, function(val) {
//city.schema.title = teams[project.data];
console.log('updating field title');
this.schema.title = teams[val];
//this.parent.refresh();
this.refresh();
console.log('refreshed')
});
}
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.js"></script>
<link href="https://code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.css" rel="stylesheet"/>
<div id="form1"></div>
In order to change the label of your field you should use options not schema.
this.options.label = teams[val];
Tell me if this isn't working for you.

AngularJS how to set dynamically value of binding element

I need, based on an in page variable, to change value of a binding element.
Here it is the in page var:
<script type="text/javascript">
var myVar = 'value1';
</script>
This is the select with the bind element:
<select value="">
<option ng-repeat="value in valueList">
{{myNewValue()}}
</option>
</select>
Here is the controller:
$scope.inPageVar = $window.myVar;
$http.get(jsonUrl).then(function(result) {
$scope.valueList = result.data.valueList;
$scope.myNewValue = function() {
return $scope.valueList[0].additional + $scope.inPageVar;
};
});
Here the JSON structure:
"valueList": [
{
"additionnal": {
"value1": "this is value 1",
"value2": "this is value 2"
}
},
{
"additionnal": {
"value1": "this is value 3",
"value2": "this is value 4"
}
}
]
I would like to know how to concatenate the in-page var value with the element of the get function.. Thank you!
(function() {
angular.module("CombineModule", []).controller('MyController', function() {
this.values = [{
"additional": {
"value1": "this is value 1",
"value2": "this is value 2"
}
}, {
"additional": {
"value1": "this is value 3",
"value2": "this is value 4"
}
}];
this.myNewValue = function(index) {
return this.values[index].additional[myVar];
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="CombineModule">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var myVar = 'value1';
</script>
</head>
<body ng-controller="MyController as v">
<select value="">
<option ng-repeat="value in v.values">
{{v.myNewValue($index)}}
</option>
</select>
<script src="app.js"></script>
</body>
</html>
If you want to expose myVar globally,
write window.myVar = 'some value' instead of var myVar = 'someval'.
Or if you want to make this available into $rootScope.myVar = 'some value'
Then in your logic,
return $scope.valueList[0].additional[window.myVar];

How to set particular value to a dropdown the angular way?

I have a simple angular dropdown like bellow:
<select class="form-control" ng-model="docPropIdentityModel.OwnerLevel"
ng-options="ownerLevel as ownerLevel.LevelName for ownerLevel in ownerLevels track by ownerLevel.OwnerLevelID">
<option value="">--Select--</option>
</select>
I've a value for OwnerLevelID, I want to assign the OwnerLevelID as the value of the dropdown & show the respective LevelName. I can easily do this by using jquery but want to do it the angular way.
I tried to assign the value for the model like bellow:
$scope.docPropIdentityModel.OwnerLevel = "123456";
But it didn't work. How it can be done?
As you are using track by expression, You need to set the OwnerLevelID property of object associated with ngModel.
$scope.docPropIdentityModel.OwnerLevel = { OwnerLevelID : "123456"};
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script>
angular.module("myapp", [])
.controller("MyController", function ($scope) {
$scope.register = {};
$scope.register.countryId = "4";
$scope.register.countries = [{
id: "1",
name: "India"
}, {
id: "2",
name: "USA"
}, {
id: "3",
name: "UK"
}, {
id: "4",
name: "Nepal"
}];
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<div>
Country Name : <select ng-model="register.countryId" ng-options="country.id as country.name for country in register.countries"></select>
</div>
<div>
Country-Id : {{register.countryId}}
</div>
</div>
</body>
</html>

How can I disable to select the particular option from Angular JS dropdown?

I want to disable a particular option from AngularJS dropdown.
It should be listed in the dropdown but should not allow it to be selected. So i need to disable it.
MyFile.tpl.html
<select class="form-control" ng-model="selectedFruits"
ng-options="fruit as fruit.name for fruit in fruits">
</select>
MyController.js
$scope.fruits = [{'name': 'apple', 'price': 100},{'name': 'guava', 'price': 30},
{'name': 'orange', 'price': 60},{'name': 'mango', 'price': 50},
{'name': 'banana', 'price': 45},{'name': 'cherry', 'price': 120}];
Here all the fruit names should be listed in the dropdown but mango and cherry should be disabled and should not allow the user to select it.
Is it possible? If possible, please let me know the solution please.
select options are disabled with disabled attribute. Since ng-options doesn't support disabling, you'll have to generate options within ng-repeat and set ng-disabled based on requirements.
Template:
<select class="form-control" ng-model="selectedFruits">
<option
ng-repeat="fruit in fruits"
ng-disabled="disabledFruits.indexOf(fruit.name) !== -1"
ng-value="fruit">
{{fruit.name}}
</option>
</select>
Inside controller:
$scope.disabledFruits = ["mango", "cherry"]
JSBin.
Just came across this and it worth mentioning that this is possible as of Angular version 1.4.0-rc.1
here are docs ngOptions
and some conversations Angular Github
HTML:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testController">
<select ng-model="myPerson" ng-options="person.name disable when person.isDisabled for person in people">
</select>
</body>
</html>
JS:
var app = angular.module("testApp", []);
app.controller("testController", function($scope) {
$scope.people = [{
"id": "0",
"name": "Homer",
"surname": "Simpson",
"isDisabled": false
}, {
"id": "1",
"name": "Peter",
"surname": "Griffin",
"isDisabled": false
}, {
"id": "2",
"name": "Philip",
"surname": "Fry",
"isDisabled": false
}, {
"id": "3",
"name": "Humpty",
"surname": "Dumpty",
"isDisabled": true
}, ];
$scope.myPerson = $scope.people[2];
});
and Plunker
If you set disabled value as default it wont work and you will see blank selected item instead.

Click to open new Segment with jquery or javascripts

Here is the Live Example what I currently have now : https://dl.dropboxusercontent.com/u/11126587/input%20Tag%20Creation/tag.html
What I am wanting is that if I click on the "+ Add Another Segment" text it will Create same input box with same tag effect Like what currently have now(You can write Something and press the Enter To See the Tag Effect) .
HTML
<html>
<head>
<meta charset="utf-8">
<title>
Input Tag
</title>
<link rel="StyleSheet" href="css/jquery.tagedit.css" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.autoGrowInput.js"></script>
<script type="text/javascript" src="js/jquery.tagedit.js"></script>
<script type="text/javascript">
$(function() {
// Empty List
$( '#empty-list input.tag' ).tagedit({
autocompleteURL: 'server/autocomplete.php'
});
// Edit only
$( '#brackets input.tag').tagedit({
autocompleteURL: 'server/autocomplete.php'
});
// Arrow List
$( '#arrow input.tag' ).tagedit({
autocompleteURL: 'server/autocomplete.php',
autocompleteOptions: {minLength: 0}
});
// Custom Break Characters
$('#custom-break input.tag').tagedit({
autocompleteURL: 'server/autocomplete.php',
// return, comma, space, period, semicolon
breakKeyCodes: [ 13, 44, 32, 46, 59 ]
});
// Local Source
var localJSON = [
{ "id": "1", "label": "Hazel Grouse", "value": "Hazel Grouse" },
{ "id": "2", "label": "Common Quail", "value": "Common Quail" },
{ "id": "3", "label": "Greylag Goose", "value": "Greylag Goose" }
];
$('#local-source input.tag').tagedit({
autocompleteOptions: {
source: localJSON
}
});
$('#local-source2 input.tag').tagedit({
autocompleteOptions: {
source: localJSON
}
});
$('#local-source3 input.tag').tagedit({
autocompleteOptions: {
source: localJSON
}
});
// Function Source
$('#function-source input.tag').tagedit({
autocompleteOptions: {
source: function(request, response){
var data = [
{ "id": "1", "label": "Hazel Grouse", "value": "Hazel Grouse" },
{ "id": "2", "label": "Common Quail", "value": "Common Quail" },
{ "id": "3", "label": "Greylag Goose", "value": "Greylag Goose" },
{ "id": "4", "label": "Merlin", "value": "Merlin" },
];
return response($.ui.autocomplete.filter(data, request.term) );
}
}
});
});
</script>
</head>
<body>
<p id="local-source" style="padding:0px; margin:0px;">
<input type="text" name="tag[]" value="" class="tag"/>
</p>
+ Add Another Segment
I found this tag Effect from a someones Blog But I wanted to extend this with Click to Create New Segment . Also I am not used to with js Fiddle So I gave example link from my Drop Box .
If Someone can make this it would be great . If my posting format have anything Wrong please let me know if I Can help you with posting or giving more Information .
Thanks in advance
Something like this??
<p id="local-source">
<input type="text" class="tag"/>
</p>
<div id="add">
+ Add Another Segment
</div>
$(document).ready(function() {
$('#add').on('click', function() {
var input = '<input type="text" class="tag"/>';
$(input).appendTo($('#local-source'));
});
});

Categories