Autocomplete when adding new data

QuestionsAutocomplete when adding new data
Shehzad Ismail asked 11 years ago

Hello,

I'm trying to get this autocomplete feature on one of the fields in the "add window". Is that possible? Basically a user should be able to fill that field only with data that is returned by an sql query.

7 Answers
Abu Ghufran answered 11 years ago

Hello,

If you are asking for autocomplete with no open text box (but just predefined options), It is currently not there.
I'm adding it in todo for upcoming builds.

David answered 10 years ago

Hello,

$opt["add_options"]["afterShowForm"] = 'function ()
{
var $elem = $("#client_id","#FrmGrid_list1").autocomplete({
source:"json_list_client.php",
minLength:3,
select: function( event, ui ) {
$("#client_id").val(ui.item.name);
}
}),elemAutocomplete = $elem.data("ui-autocomplete") || $elem.data("autocomplete");

if (elemAutocomplete) {
elemAutocomplete._renderItem = function (ul, item) {
var newText = String(item.value).replace(
new RegExp(this.term, "gi"),
"<span style='text-transform: uppercase;' class='ui-state-highlight'>$&</span>");

return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + newText + "</a>")
.appendTo(ul);
};
}
}';

Regards,

David answered 10 years ago

Hi Abu, i'm trying the select2 options.

this is much better than autocomplete.

But there is a probleme with it , you can write down search word only on inline editing.

if you try to add or edit with form-editing, select is working but you cannot write down on the search input file.

Abu Ghufran answered 10 years ago

Edit jqgrid_dist.php in add_options and edit_options
set: "jqModal" => false

$grid["add_options"] = array("recreateForm" => true, "closeAfterAdd"=>true, "closeOnEscape"=>true,
"errorTextFormat"=> "function(r){ return r.responseText;}", "jqModal" => false, "modal" => true
);
$grid["edit_options"] = array("recreateForm" => true, "closeAfterEdit"=>true, "closeOnEscape"=>true,
"errorTextFormat" => "function(r){ return r.responseText;}", "jqModal" => false, "modal" => true
);

Another fix for ie9, use latest build of select2.

<link rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.5.2/select2.css">
<script src="//cdn.jsdelivr.net/select2/3.5.2/select2.js"></script>
<script src="//cdn.jsdelivr.net/select2/3.5.2/select2.min.js"></script>

Abu Ghufran answered 10 years ago

Hello,

I've basically added following line to unfreeze keypress/keydown events added by modal dialog.

Working demo: http://phpgrid.org/demo/demos/integrations/dropdown-select2.php
Code: http://phpgrid.org/demo/demos/integrations/dropdown-select2.phps

jQuery(document).unbind('keypress').unbind('keydown');

Along with it, keep jqmodal => true (ignore my last solution)

$grid["add_options"] = array("recreateForm" => true, "closeAfterAdd"=>true, "closeOnEscape"=>true,
"errorTextFormat"=> "function(r){ return r.responseText;}", "jqModal" => true, "modal" => true
);
$grid["edit_options"] = array("recreateForm" => true, "closeAfterEdit"=>true, "closeOnEscape"=>true,
"errorTextFormat" => "function(r){ return r.responseText;}", "jqModal" => true, "modal" => true
);

David answered 10 years ago

Hi Abu,

Probleme with jqmodal turned off is first time you select an items its ok but after save or cancel on next edit or add , wrong modal is opened.

Code: http://www.phpgrid.org/demo/demos/integrations/dropdown-select2.phps

edit one cell(no inline edit) , click cancel and choose another , same client is diplayed.

Your Answer

12 + 16 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?