Auto Complete extension for keyboard not working same as jquery autocomplete

[shadownick1129]

Used autocomplete js with the keyboard. However, upon clicking the second word, the textbox value is appended to the second word instead of first word + second word.

Works with physical keyboard but not the on screen keyboard.

$('#descInput')
        .keyboard({
            autoAccept:'false',
            openOn: null,
            layout: 'international',
            visible: function (e, keyboard, el) {
                addNav(keyboard);
            },
            beforeClose: function (e, keyboard, el, accepted) {
                $('input.current').removeClass('current');
                $("body").css('padding-bottom', '0px');
            },
            css: {
                input: 'form-control input-sm',
                container: 'center-block well',
                buttonDefault: 'btn btn-default',
                buttonHover: 'btn-primary',
                buttonAction: 'active',
                buttonDisabled: 'disabled'
            },
            usePreview: true,
        })
        .autocomplete({
            source: function (request, response) {
                var results = $.ui.autocomplete.filter(arrWord, extractLast(request.term));
                response(results.slice(0, 5));
            },
            focus: function () {
                // prevent value inserted on focus
                return false;
            },
            select: function (event, ui) {
                var terms = split(this.value);
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push(ui.item.value);
                // add placeholder to get the comma-and-space at the end
                terms.push("");
                this.value = terms.join(" ");
                return false;
            }

        })
        // position options added after v1.23.4
        .addAutocomplete({
            position: {
                of: null,        // when null, element will default to kb.$keyboard
                my: 'right top', // 'center top', (position under keyboard)
                at: 'center bottom',  // 'center bottom',
                collision: 'flip'
            }
        })

    function split(val) {
        return val.split(/ \s*/);
    }

    function extractLast(term) {
        return split(term).pop();
    }

[Mottie]

Hi @shadownick1129!

Would you please update this demo to allow autocompletion of mutliple words as described. I haven't seen an example of it and you could save me a lot of time by providing a demo showing the problem.

[shadownick1129]

Hi @Mottie , Here is the updated version of the demo showing the problem that i am facing.

https://jsfiddle.net/n6xeoLyp/75/

In the demo the second word for the autocomplete keyboard always replace the first word, however if we were to use a physical keyboard to type into the textbox itself it will work.

Expected Result: I used the physical keyboard to type in two words and auto complete works for both. Then I use the virtual keyboard to add in words and it does so (with autocomplete working for the words too).

Actual Result: I used the physical keyboard to type in two words and autocomplete works for both. Then, I use the virtual keyboard to add on another word but instead of adding the third word to the existing keyed in values, the third word replaces the first and second instead. Afterwards, even if I use the physical keyboard to type, the subsequent words will always just overwrite the previous filled in word.

[Mottie]

So the autocomplete extension binds to the select event. It appears that the event is triggered before the internal select callback is called, so I think the easiest and best solution would be to modify the select callback to use an autocomplete extension function (demo).

select: function (event, ui) {
  var terms = split(this.value);
  // remove the current input
  terms.pop();
  // add the selected item
  terms.push(ui.item.value);
  // add placeholder to get the comma-and-space at the end
  terms.push("");
  this.value = terms.join(" ");
  $("#keyboard").getkeyboard().autocomplete_getVal(this.value);
  return false;
}

In the demo I defined var keyboard = $("#keyboard").getkeyboard() outside of the callback.

I'm not sure how I could modify the extension and keep it compatible with basic usage. Any ideas? Or will this modification work for you?

[shadownick1129]

Thank you for the quick fix, however i still face issue with the input upon closing the keyboard. After closing the keyboard the input text only accept one autocomplete.

I tried destroying the keyboard with this code

beforeClose: function (e, keyboard, el, accepted) {
$('input.current').removeClass('current');
$("body").css('padding-bottom', '0px');
keyboard = $('#keyboard').keyboard().getkeyboard();
keyboard.destroy();
          },

This will allow the input text to allow multiple input after closing the keyboard , however with this code upon closing the keyboard the keyboard couldn't be opened again. Here is the demo : https://jsfiddle.net/n6xeoLyp/77/

Thank you in advance.

[Mottie]

The keyboard won't open a second time because keyboard.destroy(); is used in the beforeClose callback. In that case, you would need to reinitialize the keyboard on the input when the icon is clicked.

Also the code to close the keyboard on second click shouldn't be needed since clicking outside of the keyboard would automatically close it.

https://jsfiddle.net/Mottie/n6xeoLyp/79/

[shadownick1129]

Thanks alot! It seems to work after i initialize the keyboard when the icon is clicked , however i realize setting usePreview to false will cause an issue to the keyboard autocomplete.

Currently using a quick fix is to hide the preview using css, however i am wondering if there is actually a right method to do it.

[Mottie]

What issue are you seeing with the autocomplete when usePreview is false?

[shadownick1129]

The autocomplete isnt working for multiple select it only works for single select if i change the usePreview to false

Here is the demo to the issue : https://jsfiddle.net/n6xeoLyp/82/

[Mottie]

Sorry, I forgot to address this in the last update. Hopefully, I'll get to it soon.