Develop Reference

Show hotels in autocomplete response

I have autocomplete input in my View.
Here is script, how I handle it
$(targetSelector).each(function() {
$(this)
.autocomplete({ delay: 10, minLength: 0, source(request, response) {
$(this.element[0]).attr("data-req-term", request.term);
$.ajax({
url: $(this.element[0]).attr("data-source"),
dataType: "json",
data: {
term: request.term
},
success(data) {
console.dir(data);
const results = [];
$.map(data.cities, function(value, key) {
results.push(value);
return $.map(value.airports, (value2, key2) =>
results.push(value2)
);
});
$.map(data.airports, (value, key) => results.push(value));
return response(results);
},
error() {
return response([]);
}
});
return null;
}, focus(event, ui) {
return false;
}, select(event, ui) {
const qel = $(event.currentTarget);
qel.val(ui.item.fullname);
$(qel.attr("data-id-element")).val(ui.item.id);
return false;
}
})
.data("ui-autocomplete")._renderItem = function(ul, item) {
return create_autocomplete_item($(this.element[0]), ul, item);
};
if (enableAutocompleteSelect) {
$(targetSelector).on("autocompleteselect",
function() {
if ($(this)[0].id.indexOf("origin") !== -1) {
const id = $(this)[0].id.split("_")[2];
$(`#search_legs_${id}_destination_text`).focus();
}
});
}
$(targetSelector).focus(function() {
$(this).keydown();
});
$(targetSelector).on("blur", function() {
const value = $(this).val() as string;
if (value.trim() == "") {
$(this).val("");
}
});
});
}
This function is using to get data for autocomplete. Aтв show airports and cities.
And here is answer from server, that I get.
I need to populate also hotels to autocomplete results.
How I can do this?

I can get values for Hotel just add this line
$.map(data.hotels, (value,key)=> results.push(value));

scope of javascript variable in the class

inside click_save() method of Controller, this is not pointing to the controller instance, but instead it points to button instance
How to get access to this. so it points to controller and I can do this.userModelDialog().method call
```
// --- Controller manages/dispatches tasks of view and model
function Controller() {
var controller = this;
api = new API();
var table = $('#table');
this.userModelDialog = new UserModalDialog();
$('button[data-type="edituser"]').on("click", function(e) {
controller.click_button(this);
});
// Register the button handlers
$.each(["save", "close", "copy", "delete", "reset"], function(index, id) {
msg.clear();
$("#" + id).click(controller["click_" + id]);
});
}
$.extend(Controller.prototype, {
click_user: function(id) {
api.getUser(id)
.done(function(data) {
_.keys(data).forEach(function(property) {
$('#' + property).val(data[property]);
});
})
.fail(function(data) {
alert('fail');
});
$('#userDetails').modal('show');
},
click_button: function(button) {
var id = $(button).attr('data-id');
this.click_user(id);
},
click_save: function(button) {
this.userModelDialog.submit();
msg.show({
TYPE: 'success',
MESSAGE: 'saved successfull!'
});
$('#userDetails').modal('hide');
},
click_new: function() {
},
click_copy: function() {
},
click_delete: function() {
},
click_reset: function() {
},
click_row: function(row) {
var id = $(row).attr('data-uniqueid');
this.click_user(id);
},
updateFromServer: function(data, callback) {
msg.show(data);
callback(data);
}
});
```

// Register the button handlers
$.each(["save", "close", "copy", "delete", "reset"], function(index, id) {
msg.clear();
var methodName = 'click_' + id;
if (controller[methodName]) {
$("#" + id).click(controller[methodName].bind(controller));
} else {
console.log('There is not method in class with name: ' + methodName);
}
});

How to customize the found items in autocomplete() UI?

I am trying to change how the found items are displayed in the autocomplete UI This autoComplete wigide is used inside of a dialog box.
I tried to use the '_renderMenu' property like the code below but the found items are displayed blank "no data"
Here is my code
$("#icwsTransferTo").autocomplete({
minLength: 2,
source: function(request, response) {
$.ajax({
type: 'GET',
url: 'index.php',
data: {method: 'userSearch', term: request.term},
dataType: 'json',
cache: false,
timeout: 30000,
success: function(data) {
if(!data){
return;
}
var allFound = $.map(data, function(m) {
return {
'name': m.configurationId.displayName,
'ext': m.extension,
'id': m.configurationId.id
};
});
response(allFound);
}
});
},
select: function( event, item) {
alert(item.value + ' was selected!!!');
},
'_renderItem': function (ul, item) {
return $( "<li>" ).attr( "data-value", item.id)
.append( '<span>' + item.name+ '</span><span style="float: right"> (' + item.ext + ')</span>' )
.appendTo( ul );
}
});

I figured it out...
Here is the new code for anyone that is searching. I found this article as a great resource.
$.widget("custom.autoCompleteUserList", $.ui.autocomplete, {
_renderItem: function (ul, item ) {
if(item.ext != 'undefined' && typeof item.ext !== 'undefined'){
var label = '<div class="ui-autocpmplete-item-wrapper"><span class="ui-autocpmplete-item-name-span">' + item.name + '</span><span class="ui-autocpmplete-item-ext-span"> (ext. ' + item.ext + ')</span></div>';
} else {
var label = '<div class="ui-autocpmplete-item-wrapper">' + item.name + '</div>';
}
return $( "<li>" )
.attr( "data-value", item.id )
.append( label)
.appendTo( ul );
}
});
$("#icwsTransferTo")
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autoCompleteUserList( "instance" ).menu.active ) {
event.preventDefault();
}
}).autoCompleteUserList({
minLength: 2,
source: function(request, response) {
$.ajax({
type: 'GET',
url: 'index.php',
data: {method: 'userSearch', term: request.term},
dataType: 'json',
cache: false,
timeout: 30000,
success: function(data) {
if(!data){
return;
}
var finalSource = $.map(data, function(m) {
return {
'name': m.configurationId.displayName,
'ext': m.extension,
'id': m.configurationId.id
};
});
response(finalSource);
}
});
},
focus: function() {
// prevent value inserted on focus
//return false;
},
select: function( event, ui ) {
console.log(ui.item);
alert(ui.item.value + ' < > ' + ui.item.label + ' was selected!!!');
}
})

empty title of dialog in Jquery UI

I write this script that user check checkbox info that want to delete and click delete button it delete info with ajax. My problem is that when in first time I delete everything is fine but in second time title of dialog is empty. Why?
I do that with this code after showing dialog because my title is dynamic:
$("#ui-id-1").text(tittle);
<script src="../../Scripts/jquery-1.8.3.js"></script>
<script src="../../Scripts/jquery-ui-1.9.2.custom.js"></script>
<script>
$(function () {
$(":checkbox").change(function () {
var $this = $(this);
if ($this.is(":checked")) {
$this.closest("tr").addClass("SlectedtRow");
} else {
$this.closest("tr").removeClass("SlectedtRow");
}
})
var tittle = '';
var url = '';
$("#dialog").dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: [
{
text: "بلی",
click: function () {
Delete();
$(this).dialog("close");
}
},
{
text: "خیر",
click: function () {
$(this).dialog("close");
}
}
]
});
var IsActive
// Link to open the dialog
$(".insertBtn").click(function (event) {
var IsSelected = false;
var ModalText = " آیا کاربر ";
$('#userForm input:checked').each(function () {
ModalText += this.value + " - "
IsSelected = true;
});
if (IsSelected) {
document.getElementById('ErrorContent').style.display = "none";
ModalText = ModalText.slice(0, -2);
if (this.id == 'DeleteUser') {
ModalText += " حذف گردد "
tittle = 'حذف کاربر'
url = '#Url.Action("DeleteUser", "UserManagement")';
}
else if (this.id == 'InActiveUser') {
ModalText += " غیر فعال گردد "
tittle = 'تغییر فعالیت کاربر '
url = '#Url.Action("ChangeActiveStatus", "UserManagement")';
IsActive = false;
}
else if (this.id == 'ActiveUser') {
ModalText += " فعال گردد "
tittle = 'تغییر فعالیت کاربر '
url = '#Url.Action("ChangeActiveStatus", "UserManagement")';
IsActive = true;
}
$('#ModalMessgae').text(ModalText);
$("#dialog").dialog("open");
$("#ui-id-1").text(tittle);
event.preventDefault();
} })
function Delete() {
var list = [];
$('#userForm input:checked').each(function () {
list.push(this.id);
});
var parameters = {};
if (url == '#Url.Action("DeleteUser", "UserManagement")') {
parameters = JSON.stringify(list);
}
else {
parameters = JSON.stringify({ "userId": list, "ISActive": IsActive });
}
$.ajax({
url: url,
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: "html",
traditional: true,
data: parameters,
success: function (data, textStatus, jqXHR) {
$('#updateAjax').html(data);
},
error: function (data) {
$('#updateAjax').html(data);
}
}); //end ajax
}
});
</script>
html markup
#using Common.UsersManagement.Entities;
#model IEnumerable<VwUser>
#{
Layout = "~/Views/Shared/Master.cshtml";
}
<form id="userForm">
<div id="updateAjax">
#if (string.IsNullOrWhiteSpace(ViewBag.MessageResult) == false)
{
<div class="#ViewBag.cssClass">
#Html.Label(ViewBag.MessageResult as string)
</div>
<br />
}
<table class="table" cellspacing="0">
#foreach (VwUser Item in Model)
{
<tr class="#(Item.IsActive ? "tRow" : "Disable-tRow")">
<td class="tbody">
<input type="checkbox" id="#Item.Id" name="selected" value="#Item.FullName"/></td>
<td class="tbody">#Item.FullName</td>
<td class="tbody">#Item.Post</td>
<td class="tbody">#Item.Education</td>
</tr>
}
</table>
</div>
<br />
<br />
#if (!Request.IsAjaxRequest())
{
<div class="btnContainer">
delete
<br />
<br />
</div>}

set title like below
Specifies the title of the dialog. If the value is null, the title attribute on the dialog source element will be used.
Code examples:
Initialize the dialog with the title option specified:
$( ".selector" ).dialog({ title: "Dialog Title" });
//Get or set the title option, after initialization:
// getter
var title = $( ".selector" ).dialog( "option", "title" );
// setter
$( ".selector" ).dialog( "option", "title", "Dialog Title" );
see set title in dialog box

My object is undefined when I test it i QUnit

I'm using QUnit and have a test script for a JQuery UI Widget:
define(
['jquery',
'knockout',
'../Widget/SearchPod/searchPod',
'jqueryui',
'jquery.ui.widget',
'../Widget/SearchPod/clr.searchPod'],
function ($, ko, searchPod) {
var checkSearchBy = function () {
test('check if select has Search By text', function () {
var expected = "Search By";
alert(searchPod.employees);//.checkSearchByWidget());
deepEqual(searchPod.employees, expected, "We expect drop down text to
display 'Search By' by default");
return 1;
});
};
return {
checkSearchBy: checkSearchBy
};
}
);
For some reason whenever I run the test script, an error occurs saying that the parameter searchpod above is undefined or null. The code of searchpod is below:
require(['jquery',
'knockout',
'jqueryui',
'jquery.ui.widget',
'domReady!',
'Widget/SearchPod/clr.searchPod',
'Widget/Listbox/clr.combobox'],
function ($, ko) {
$(document).ready(function () {
$("#search-pod").searchPod({
ready: function () {
var minimumLength = 2;
$("#search-message").hide();
//start
//end
var employees = [*some data*]
var leaves_filed = [*some data*]
var claims_filed = = [*some data*]
function sortData(prop, asc) {
data = data.sort(function (a, b) {
if (asc) return (a[prop] > b[prop]) ? 1 : ((a[prop] < b[prop]) ? -1 : 0);
else return (b[prop] > a[prop]) ? 1 : ((b[prop] < a[prop]) ? -1 : 0);
});
}
//This is to display search messages depends on selected search type and
function validateCriteria(selectedType) {
var searchMessage = 'No values match search criteria';
if (selectedType == 'ssn') {
if ($("#searchBox").val().length > minimumLength) {
searchMessage = 'Must enter all 9 digits of SSN';
}
}
$("#search-message").text(searchMessage);
}
// Search pod items
var selectedType = 'lastname';
var data = employees;
// Apply the combobox widget
$("#searchBy").combobox({
ready: function () {
},
select: function () {
selectedType = $("option:selected", this).val();
switch (selectedType) {
case 'lastname':
return;
if (employees.length == 1) {
$("#loadingImage").css("display", "");
$("#searchBox").css("display", "none");
$.ajax({
url: "api/Dashboard/GetEmployeeListReport",
type: "GET",
processData: false,
success: function (result) {
employees.length = 0;
employees = result.dataSet.dataTable.row;
$("#loadingImage").css("display", "none");
$("#searchBox").css({ display: '' });
data = employees;
}
});
}
else { data = employees; }
minimumLength = 1;
break;
case 'ssn':
minimumLength = 10;
break;
case 'eeid':
if (employees.length == 1) {
$("#loadingImage").css("display", "");
$("#searchBox").css("display", "none");
$.ajax({
url: "api/Dashboard/GetEmployeeListReport",
type: "GET",
processData: false,
success: function (result) {
employees.length = 0;
employees = result.dataSet.dataTable.row;
$("#loadingImage").css("display", "none");
$("#searchBox").css({ display: '' });
data = employees;
minimumLength = employees[5].eeid.length;
}
});
}
else { data = employees; minimumLength =
employees[5].eeid.length; }
break;
case 'leave_number':
if (leaves_filed.length == 1) {
$("#loadingImage").css("display", "");
$("#searchBox").css("display", "none");
$.ajax({
url: "api/Dashboard/GetLeavesList",
type: "GET",
processData: false,
success: function (result) {
leaves_filed.length = 0;
leaves_filed = result.dataSet.dataTable.row;
$("#loadingImage").css("display", "none");
$("#searchBox").css({ display: '' });
data = leaves_filed;
minimumLength = leaves_filed[0].leaveNumber.length;
}
});
}
else { data = leaves_filed; minimumLength =
leaves_filed[0].leaveNumber.length; }
break;
case 'claim_number':
if (claims_filed.length == 1) {
$("#loadingImage").css("display", "");
$("#searchBox").css("display", "none");
$.ajax({
url: "api/Dashboard/GetClaimsList",
type: "GET",
processData: false,
success: function (result) {
claims_filed.length = 0;
claims_filed = result.dataSet.dataTable.row;
$("#loadingImage").css("display", "none");
$("#searchBox").css({ display: '' });
data = claims_filed;
minimumLength = claims_filed[10].claimNumber.length;
}
});
}
else { data = claims_filed; minimumLength =
claims_filed[10].claimNumber.length; }
break;
}
sortData(selectedType, true);
$('#searchBox').val('');
}
});
sortData(selectedType, true);
//This will hide search-message when backpress is pressed.
$('html').keyup(function (e) {
if (e.keyCode == 8) {
if ($("#searchBox").val().length < minimumLength) {
if ($("#search-message").show()) $("#search-message").hide();
}
}
return;
});
//Code for Making SSN AutoComplete
$('#searchBox').keyup(function () {
if (selectedType == "ssn" && $('#searchBox').val().length == 10) {
var rptParam = "?ssn=" + $('#searchBox').val();
var ssnData = [{ "ssn": "", "lastname": "" }];
$.ajax({
url: "api/Dashboard/GetSsnList" + rptParam,
type: "GET",
processData: false,
success: function (result) {
ssnData = result.dataSet.dataTable.row;
var ssnArray = [];
ssnArray.push(ssnData);
if (ssnArray.length > 0) {
$("#searchBox").autocomplete({
minLength: 10,
source: function (request, response) {
var searchField;
var filteredArray = $.map(ssnArray, function (item) {
if (item.ssn != null) {
searchField = item.ssn;
if (searchField.toLowerCase().indexOf
(request.term) == 0 || searchField.indexOf
(request.term) == 0) {
return item;
}
} else { return null; }
});
response(filteredArray);
},
focus: function (event, ui) {
var focusValue;
focusValue = ui.item.ssn;
$("#searchBox").val(focusValue);
return false;
},
select: function (event, ui) {
}
}).data("ui-autocomplete")._renderItem =
function (ul,item){
return $("<li>")
.append(displayFormat)
.appendTo(ul);
};
}
$('#searchBox').autocomplete("search");
}
});
}
return;
});
$("#searchBox").focus(function () {
if (selectedType == 'ssn') {
$("#searchBox").autocomplete();
$("#searchBox").autocomplete("destroy");
return;
}
var searchField;
$("#searchBox").autocomplete({
minLength: minimumLength,
source: function (request, response) {
var filteredArray = $.map(data, function (item) {
if (selectedType === 'lastname') {
searchField = item.lastname;
}
if (selectedType === 'ssn') {
return false;
}
if (selectedType === 'eeid') {
searchField = item.eeid;
}
if (selectedType === 'leave_number') {
searchField = item.leaveNumber;
}
if (selectedType === 'claim_number') {
searchField = item.claimNumber;
}
if (searchField.toLowerCase().indexOf(request.term) == 0 ||
searchField.indexOf(request.term) == 0) {
if (selectedType === 'ssn' && request.term.length < 4) {
return null;
}
return item;
}
else {
return null;
}
});
if (!filteredArray.length) {
$("#search-message").show();
validateCriteria(selectedType);
}
else {
$("#search-message").hide();
}
response(filteredArray);
},
focus: function (event, ui) {
var focusValue;
if (selectedType === 'lastname') {
focusValue = ui.item.lastname;
}
if (selectedType === 'eeid') {
focusValue = ui.item.eeid;
}
if (selectedType === 'leave_number') {
focusValue = ui.item.leaveNumber;
}
if (selectedType === 'claim_number') {
focusValue = ui.item.claimNumber;
}
$("#searchBox").val(focusValue);
return false;
},
create: function (event, ui) {
$(this).autocomplete("widget").addClass("search-results-list");
},
open: function (event, ui) {
$(".search-results-list li.ui-menu-item").addClass("search-results-item");
},
select: function (event, ui) {
//return false; // Cancel the select event
var focusValue;
if (selectedType === 'lastname') {
focusValue = ui.item.lastname;
// TODO: call a function here that will send the name of the report to show
$('#report-popup-dialog-overlay').show();
$('#report-popup-dialog').show();
}
if (selectedType === 'eeid') {
focusValue = ui.item.eeid;
}
if (selectedType === 'leave_number') {
focusValue = ui.item.leaveNumber;
$('#dynamictext').text('Leave Report for ' + focusValue);
$('#dynamicHeader').text('Leave Report');
}
if (selectedType === 'claim_number') {
focusValue = ui.item.claimNumber;
$('#dynamicHeader').text('Claim Report for ' + focusValue);
$('#dynamictext').html("Loading...");
//Need to make Ajax Call to get the report.
var parameter = "?claimNumber=" + focusValue;
$.ajax({
url: "api/ViewReport/GetClaimReport" + parameter,
type: "POST",
processData: false,
success: function (result) {
$('#dynamictext').html("");
$('#dynamictext').html(result);
}
});
}
return false;
}
})
.data("ui-autocomplete")._renderItem = function (ul, item) {
var displayFormat = "";
return $("<li>")
.append(displayFormat)
.appendTo(ul);
};
});
}
});
});
//Test helper functions
//2. checkSearchBy
function checkSearchBy() {
alert($('#searchBy').text());
return $('#searchBy').text();
}
return {
checkSearchByWidget: function () {
return checkSearchBy();
}
};
});
I've been at this for two days but cant seem to make the searchpod be seen by the test script above