Why is my autocomplete not doing the selectFirst and mustMatch? Do I need a work around for this?
I'm using version 1.8.9 of jQuery.
Here is my setup code:
$(function () {
$("#SelectedSchool").focus().autocomplete({
source: function (request, response) {
$.ajax({
url: "/School/FindShools",
type: "POST", dataType: "json",
data: {
searchText: request.term,
maxResults: 10,
autofill: true,
selectFirst: true,
highlight: true
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.SchoolName,
value: item.SchoolName,
id: item.SchoolId
}
}))
}
})
},
select: function (event, ui) {
SchoolID = ui.item.id.toString();
$("#SelectedSchoolID").val(ui.item.id.toString());
}
});
});
The selectFirst and mustMatch options are gone in the jQuery UI autocomplete plugin. They were available in de bassistance.de autocomplete plugin, which has been deprecated.
Here's a migration guide to the new jQuery UI autocomplete.
Quoted from that guide:
selectFirst: Similar to autoFill (at the top of this list), this option is gone and has now immediate replacement, nor a need for one. The behaviour for selecting values is solid enough to make this option redundant.
mustMatch: Gone, but easy to implement with the select event. Once more, the combobox provides an example for that.
UPDATE
The link to the migration guide isn't working today (2011-04-09). I could fortunately open the site from cache, so I've saved it, zipped it and put it up for anyone to download.
Hope this helps
(2011-04-10: The Migration guide link works again)
Related
I am using select2 4.0.0 for this project. A lot of the other comments and thoughts on this issue seem be for previous versions of select2, so I decided to post a new question.
I have a select2 on a page that can both create entries in the database and edit entries in the database. The select2 is populated dynamically by ajax after the user types a few letters and they can select a value. This works fine for creating entries when they need to select one.
On the same page, they can click existing entries to display further information and edit the entry in the same form. This also needs to update the select2 element with the correct selection text and update the select element that is backing the select2. Since this is normally done through ajax, the markup doesn't exist normally.
I've tried reading the documentation for select2, but I find it a bit disorganized. Does select2 provide any feature for accomplishing this? Do I need to create and update all the markup manually? I had looked at a dataAdapter, but I'm not sure if that is what I need or not.
HTML:
<select class="form-control" name="entry" id="select_field" data-url="/entry/search"></select>
Code for the select2 element:
$("#select_field").select2({
placeholder: "Search",
minimumInputLength: 2,
allowClear: true,
ajax: {
cache: true,
delay: 250,
method: 'POST',
url: $("#select_field").data('url'),
processResults: function (data, page) {
return {
results: data,
};
},
},
escapeMarkup: function (markup) { return markup; },
templateSelection: function (record) {
if (!record.id) { return record.text; }
return record.title;
},
templateResult: function (record) {
if (record.loading) { return record.text; }
var markup = $("<div>").text(record.title);
return markup.html();
},
});
I am trying to develop tree structure using jquery select2 plugin with ajax call that returns json format.I implemented it using struts 2.
my code is as follows
In script section
<script>
$(document).ready(function(){
var id=1;
$('#sub_lessons').select2({
minimumInputLength: 3,
maximumSelectionSize: 1,
multiple: true,
ajax: {
url: 'getData.action?lid='+id,
dataType: 'jsonp',
quietMillis: 100,
data: function(term, page) {
return {
q: term,
page_limit: 10,
page: page
};
},
results: function(data, page) {
return {
results: data,
more:false
};
}
},
formatResult: function(data) {
return data.text;
},
formatSelection: function(data) {
return data.text;
},
dropdownCssClass: "bigdrop",
escapeMarkup: function(m) {
return m;
}
});
});
</script>
and in body part
<select id="sub_lessons" class="form-control select2" multiple>
</select>
Here the action is not being called . If The action calls it retuns the following json String
[{"children":[{"children":[{"children":[],"id":15,"text":"algebra 3"}],"id":3,"text":"one one one"}],"id":1,"text":"another ones"},{"children":[{"children":[],"id":14,"text":"ratios"}],"id":6,"text":"lesson one"},{"children":[],"id":8,"text":"one 1"},{"children":[],"id":12,"text":"algebra 2"},{"children":[],"id":13,"text":"lesson 2"},{"children":[],"id":16,"text":"lesson 232"}]
The action is not being called. json format displays in select box something like
1
1.1
1.1.1
1.2
1.2.1
1.2.2
1.3
1.4
Now i want to implement the same using select 2 plug in.
is it possible to possible to do so?
if so please help me to implement this. I could not understand where I am doing wrong.
any help would be appreciated.
It's seems like only the following style ,
http://jsbin.com/wicutoti/20/edit
and i found some topic related to how to customising select2's dropdown
https://groups.google.com/forum/#!msg/select2/S0b-JJJIFYY/il-MYOFdGusJ
it points to not support the tree structure at present
In that thread, about trees: "not yet, something im working on for 4.0". And then: "Support for trees has probably been shelved for 4.0", says Igor and Kevin, the main Select2 developers (it seems, looking at the GitHub stats).
I'm using Jquery Select2 for my project. I want to keep a default value in a single input field when the page is loaded. I tried this by setting initSelection while I'm initiating the select2 component like this.
$(document).ready(function() {
allowClear: true,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
dataType: 'json',
url: "public/data.php",
data: function (term, page) {
return {
q: term, // search term
component: "map",
all_selected: $("#map-all").hasClass("active"),
parent_value: $("#city").val(),
child_value: ""
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {results: data};
}
},
initSelection: function(element, callback) {
return $.getJSON("public/data.php?q="+element.val()+"&component=map&all_selected=false&parent_value=&child_value=", null, function(data) {
if ($.isFunction(callback)) {
return callback(data);
}
});
},
formatSelection: format,
formatResult: format,
});
However this does not work as it is should be.
But, when I make multiple: true, as a select2 option, this works perfectly. How do I do this for single hidden field?
Thanks & Regards!
Okay, I solved this by changing the callback from return callback(data); to return callback(data[0]);. I think the reason behind this is since the field is not a multiple field, it only accepts a single object to the callback function.
I have a jQuery AutoComplete for a text box. The code to initialize the AutoComplete is:
$("#SearchBox1").autocomplete({
autoFocus: false,
source: "Home/AutoComplete",
select: function (event, ui) {
alert(ui.item.label);
}
When the URL doesn't contain a path, the jQuery Autocomplete works, but when the URL contains something like localhost/home/GoToPage/?page=2, then AutoComplete attempts to use /home/GoToPage/Home/AutoComplete. At this point AutoComplete is completely broken, because it is using a bad path.
Are there any good ways of dealing with this problem?
One possible solution is based off of MadRabbit's comments, and Dan Wellman jQueryUI Autocomplete tutorial at http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/
$("#SearchBox1").autocomplete({
autoFocus: false,
source: function (request, callback) {
//pass request to server
$.getJSON("Home/AutoComplete?term=" + request.term, request, function (responseData) {
//create array for response objects
var suggestions = [];
//process response
$.each(responseData, function (i, val) {
suggestions.push(val);
});
//pass array to callback
callback(suggestions);
});
},
select: function (event, ui) {
$('#SearchBox1').val(ui.item.label);
}
});
I'm sure I'm missing something very simple on this one. After banging my head against the desk (literally) for a couple of days now, I submit myself to the mercy of the stack:
I'm using jQuery UI Autocomplete as a combobox in my jQGrid (I know! I've already looked for the solution elsewhere to no avail!). I would like the dropdown to open when I access the cell for editing through the onSelectRow event in jqGrid. Basically, I want to do exactly what is discussed here:
Open jQuery UI ComboBox on focus
and demo'd here:
http://jsfiddle.net/gEuTV/
The only difference is that I need it in jqGrid. I've tried the code below which I (mistakenly) through would trigger the combobox to appear when the row is focused, but the combobox doesn't appear on focus of the row in the onSelect event. I have a sneaking suspicion that I'm just putting the following code in the wrong spot, but I've tried it everywhere I can think of:
$("#"+id+"_usr_validation","#list2").bind("focus", function () {
this.value = '';
$(this).autocomplete("search", '');
Here's my complete code including the grid:
$(function(){
var lastsel;
$("#list2").jqGrid({
url: 'php_includes/uploadgrid.php',
datatype: "json",
mtype: 'GET',
colNames:[
'User Value',
'Translated Value',
'User Validation,
],
colModel:[
{name:'usr_value',index:'usr_value', sortable:'true', width:60, align:"center", editable:false},
{name:'translated_value',index:'translated_value', sortable:'true', width:60, align:"center", editable:false},
{name:'usr_validation',index:'usr_validation', sortable:'true', width:60, align:"center", editable:true}
],
pager: '#pager2',
rowNum: 1000,
scroll: true,
gridview: true,
viewrecords: false,
height: 'auto',
hidegrid: false,
autowidth: true,
pgbuttons: false,
pginput: false,
forceFit: true,
emptyrecords: "No record was loaded",
onSelectRow: function(id){
if(id && id==lastsel){
$("#list2").jqGrid('editRow',id,true,autocomp,'','','',selectNone);
} else {
if(id && id!==lastsel){
$("#list2").jqGrid('saveRow',lastsel);
$("#list2").jqGrid('editRow',id,true,autocomp,'','','',selectNone);
lastsel=id;
}
}
},
editurl: '/php_includes/jqGridCrud.php',
});
jQuery("#list2").jqGrid('navGrid',"#pager2",{edit:false, search:false, del:false, add:false})
function selectNone(){
$("#list2").jqGrid('resetSelection');
}
//this function de-selects all previously accessed rows
function autocomp(id) {
var term2 = $("#list2").jqGrid('getCell',id,'usr_value');
$("#"+id+"_usr_validation","#list2")
.autocomplete({
source: function(request, response) {
$.ajax({
url: "/php_includes/Autocomplete.php",
dataType: "json",
data: {
term : request.term,
term2 : term2,
},
success: function(data) {
response(data);
}
});
},
minLength: 0,
select: function(event, ui) {
$("#list2").val(ui.item.id);
},
});
$("#"+id+"_usr_validation","#list2").bind("focus", function () {
this.value = '';
$(this).autocomplete("search", '');
});
}
});
You should change 'User Validation, to 'User Validation' and remove trailing commas in different places of your code (like from editurl: '/php_includes/jqGridCrud.php',} and close which are syntax errors in JavaScript, but ignored in many, but not all web browsers).
UPDATED: One more problem is that the focus on the editing field will be set before oneditfunc will be called, so the "focus" event can not be triggered. As a workaround you can trigger "focus" event directly after the .bind("focus", ....
See your modified demo here.