Develop Reference

Best way to avoid auto-complete drop down from appending same value multiple times?

I have a search form which has some ajax querying the database as the user types and listing similar results in a datalist. The issue I was having is as a user typed, it would continuously append a match it already found. To illustrate:
User types: "d"
Datalist: <option value = "dog">
User types: "do"
Datalist: <option value = "dog"> <option value = "dog">
User types: "dog"
Datalist: <option value = "dog"> <option value = "dog"> <option value = "dog">
I solved the issue by emptying the existing data lists on every key-up event before re-appending the current matches. It works, except that it causes the results to appear to flash in the data list as you type as it is constantly toggling between having options in the data list, having no options, then having options again. What is the better way of handling this scenario?
Current JS:
$(document).ready(function() {
$(window).on('load', function(){
var search_input = $("#listing-search-bar")
if (search_input) {
search_input.keyup(function(e){
autocomplete(e);
});
};
function autocomplete(el) {
var input = el.target;
var min_chars = 0;
if (input.value.length > min_chars) {
$.ajax({
type: 'GET',
url: "/listings/search",
data: {"query" : input.value},
dataType: "json"
}).done(function(response) {
// Delete existing results to prevent same result appending multiple times
$("#cities").empty();
response.forEach( function(city) {
// Append all matching cities to drop down
$("#cities").append(`<option value="${city}"></option>`);
});
});
};
};
});
});

You can simply check if element exist before adding it to the DOM:
if ( !$('#cities option[value="'+city+'"]').length )
$("#cities").append(`<option value="${city}"></option>`);

Append Selected Drop Down Value with Option in Laravel Blade with Jquery

I want to show the models by changing the Drop Down value....I know how to get the value of drop down with change function but my problem is that i want to send that value in route to filter the models.....Please tell me how can i send the changed value id with route from blade..
This is my Drop Down
<select class="form-control" id="category" placeholder="Select category">
<option>All</option>
#foreach($categories as $category)
<option value="{{route('contributors.index')}}?category={{ $category->id }}">{{$category->name}}</option>
#endforeach
</select>
Here i my Jquery Change Function
$('#category').change(function(){
alert($(this).val());
})
Explanation :
Please check the below picture....I want to show the models(in the same view)which are related to that category selected in the drop down.

Add this to redirect you to the specific route. For you, it refreshes the page with the selected id in URL. So, models will filter for the given category_id.
$('#category').change(function(){
window.location = "domain.com/route/" + $('option:selected', this).val();
})
Of course, you should use your own URL instead of the URL in the example.

You can use ajax call to append and send category value to your route
$( "#category" ).change(function() {
var id=$(this).val();
$.ajax({
type: 'GET',
url: your url goes here,
success: function (data) {
//here yuo can append to model div
},
error: function (data) {
console.log(data);
}
});
});
the above code is sample for ajax request

Retrieve selected option from database and present as selected Angular JS

I have a select like this:
<select class="form-control" ng-hide="Catalogos.length==0" ng-change="filtro(selected)" ng-model="selected" ng-options="item.Nombre for item in Catalogos "></select>
and it Charge it with Angular Controller like this:
function cargarCatalogo() {
apiService.get("../../api/Catalogo/GetCatalogoPadre/" + $scope.Catalogo + "/",
null,
function(res) {
$scope.Catalogos = res.data;
$scope.selected = $scope.Catalogos[0];
$scope.filtro($scope.selected);
},
errorCatalogo);
}
So I have two different context with same view: Create and Edit. If $scope.catalogoid come null I present a Create View and it come with value is an Edit View.
Problem is into Edit View, I want to present a select of actual value of Id instead first value. How can I do that?

Controller response after select one value of select option

Context
I have two tables:
Firmtable : ID (string), Firm(string)
Firms table:
FirmID(string FK), Name(string)
That I want to do is to select one value of Firm table and get it to my controller Firm to finally do a query depending of Firms value received
View
<select ng-change="filtro(selected)" ng-init="Banks= Firm[0]" ng-model="selected" ng-options="item.Namefor item in Firms">
</select><br/>
JS
function GetFirm() {
apiService.get("../../api/Firms/", null,
function (res) {
$scope.Firm= res.data;
$scope.selected = $scope.Firms[0];
}, errorFirm);
}
Controller I want to get value selected
public HttpResponseMessage GetFirm(HttpRequestMessage request, string firm)
{
//some code here
}
So how can I received selected value into string firm? , I think is another function of JS but I´m really lost there
Note: Method whehre I want to received string firm is into
apiService.get(../../api/Firm/"

You can just use the ng-change and pass the selected value,
So inside your controller,
$scope.filtro = function(selected){
apiService.get(../../api/Estatus/+selected.Nombre ;
}

Default selected value of dropdown menu using Jquery

I have 3 nested dropdown menus which are dynamically populated from a mysql database and I use Jquery. I want to set a selected value, depending on the entry in my database.
For example:
I have a table that contains many devices. Each device has its storage place (room, shelve, box). Notice: different rooms contain different shelves which contain different boxes, thats why I use a nested dropdown menu.
Next to each device is a button "change".
What I want is that the current storage place of the device is already selected in my dropdown menu.
This is part of my JS functions (got them from another site, I'm very new to JS):
function populateComp(xmlindata) {
var mySelect = $('#manufacturer');
$('#printertype').disabled = false;
$(xmlindata).find("Company").each(function()
{
optionValue=$(this).find("id").text();
optionText =$(this).find("name").text();
mySelect.append($('<option></option>').val(optionValue).html(optionText));
});
}
This is my html code:
Raum:</br></br><select name="manufacturer" id="manufacturer" >
<option value="">Auswahl:</option></select> </br></br>
Regal:</br></br> <select name="printertype" id="printertype" disabled="disabled" >
<option value="">Auswahl:</option></select> </br></br>
Kiste:</br></br><select name="printermodel" id="printermodel" disabled="disabled" >
<option value="">Auswahl:</option></select></br></br>
<div id="loading" style="display: none;"></div>
<div id="output" ></div>
Part of my ajax code:
jQuery().ready(function($){
$('#loading')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
// Ajax Called When Page is Load/Ready (Load Manufacturer)
jQuery.ajax({
url: 'man_list.php',
global: false,
type: "POST",
dataType: "xml",
async: false,
success: populateComp
});
Sorry for that much code, I hope anyone has a good solution for me, which I (the JS noob) can understand :)

You can check your server's response while populating dropdown options
function populateComp(xmlindata) {
var mySelect = $('#manufacturer');
$('#printertype').disabled = false;
$(xmlindata).find("Company").each(function()
{
optionValue=$(this).find("id").text();
optionText =$(this).find("name").text();
var $opt = $('<option> </option>').val(optionValue).html(optionText);
if(/* compare current data with your device here */) $opt.attr("selected", "selected");
mySelect.append($opt);
});
}