Merge branch '29-fix-typeahead-in-create-update-recipe-form' into 'develop'

Resolve "fix typeahead in create/update recipe form"

See merge request bluekay/shopping-list!11
This commit is contained in:
Tim Krehan 2019-05-21 18:52:37 +00:00
commit 08531b6502
4 changed files with 16 additions and 7 deletions

View file

@ -8,7 +8,9 @@ function autocomplete() {
data: { data: {
q: search q: search
}, },
success: function (data) { createAutocompleteDropdown(elem, JSON.parse(data)); } success: function (data) {
createAutocompleteDropdown(elem, JSON.parse(data));
}
}); });
} }
} }
@ -17,6 +19,10 @@ function createAutocompleteDropdown(elem, values) {
var dropdownItems = dropdownmenue.find(".dropdown-item"); var dropdownItems = dropdownmenue.find(".dropdown-item");
dropdownItems.remove(); dropdownItems.remove();
if (!(dropdownmenue.hasClass("show"))){
elem.click();
}
for (index = 0; index < values.length; index++) { for (index = 0; index < values.length; index++) {
var value = values[index]; var value = values[index];
var regex = new RegExp((elem).val(), "ig"); var regex = new RegExp((elem).val(), "ig");
@ -31,4 +37,6 @@ function createAutocompleteDropdown(elem, values) {
function dropdownButtonClick() { function dropdownButtonClick() {
var string = $(this).data("val"); var string = $(this).data("val");
$('#' + $(this).attr("aria-textfield")).val(string); $('#' + $(this).attr("aria-textfield")).val(string);
$('[aria-labelledby=' + $('#' + $(this).attr("aria-textfield")).attr("id") + ']').find(".dropdown-item").remove();
$('[aria-labelledby=' + $('#' + $(this).attr("aria-textfield")).attr("id") + ']').append('<button class="dropdown-item" type="button" data-value="-1">Tippen um zu suchen... </button>');
} }

File diff suppressed because one or more lines are too long

View file

@ -24,6 +24,8 @@ function addItem() {
var clone = $($(".ingredientRow")[0]).clone(); var clone = $($(".ingredientRow")[0]).clone();
clone.find("input[type=text]").attr("name", ("ingredient[" + dataID + "][Name]")); clone.find("input[type=text]").attr("name", ("ingredient[" + dataID + "][Name]"));
clone.find("input[type=text]").attr("id", ("dropdownMenuAutocomplete-" + dataID));
clone.find(".dropdown-menu").attr("aria-labelledby", ("dropdownMenuAutocomplete-" + dataID));
clone.find("input[type=text]").val(""); clone.find("input[type=text]").val("");
clone.find("input[type=text]").on("input", autocomplete); clone.find("input[type=text]").on("input", autocomplete);
clone.find("input[type=text]").on("focus", function () { $(this).select(); }); clone.find("input[type=text]").on("focus", function () { $(this).select(); });

View file

@ -56,9 +56,9 @@
</select> </select>
<div class="input-group"> <div class="input-group">
<input type="text" data-apiurl="/api/recipes/auto" data-strlen="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuAutocomplete" class="autocomplete-ingredient form-control dropdown" name="ingredient[1][Name]" placeholder="Zutat" autocomplete="off" required> <input type="text" data-apiurl="/api/recipes/auto" data-strlen="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuAutocomplete-1" class="autocomplete-ingredient form-control dropdown" name="ingredient[1][Name]" placeholder="Zutat" autocomplete="off" required>
<div class="dropdown-menu" aria-labelledby="dropdownMenuAutocomplete"> <div class="dropdown-menu" aria-labelledby="dropdownMenuAutocomplete-1">
<button class="dropdown-item" type="button" data-value="-1">Tippen um zu suchen... </button> <button class="dropdown-item" type="button" data-value="-1">Tippen um zu suchen... </button>
</div> </div>