locked
Jquery code to pick up the first datalist item in input as selected text RRS feed

  • Question

  • User283528319 posted

    Hi all,

    I want <g class="gr_ gr_9 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="9" data-gr-id="9">datalist</g> <g class="gr_ gr_17 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="17" data-gr-id="17">autocomplete</g> the text in the input

    Like; when you write En it immediately adds gland to it and makes it England. Chose it immediately but lets you continue to write and chose another one

    I couldn't find any native bootstrap solution for it. Do you have any jquery code or something like that to accomplish this?

    thank you

    Tuesday, January 15, 2019 4:32 PM

All replies

  • User475983607 posted

    I couldn't find any native bootstrap solution for it. Do you have any jquery code or something like that to accomplish this?

    Just type autocomplete in a Google search then find a jQuery plugin that fits your requirement. 

    The chosen API is common.

    https://harvesthq.github.io/chosen/

    But there are many others...

    https://mdbootstrap.com/docs/jquery/forms/autocomplete/

    https://www.w3schools.com/howto/howto_js_autocomplete.asp

    https://readthedocs.org/projects/bootstrap-autocomplete/

    Tuesday, January 15, 2019 4:58 PM
  • User283528319 posted

    I know all that approaches but none of them is the one I want.

    They don't have inline autocomplete. They just filter the <g class="gr_ gr_131 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling" id="131" data-gr-id="131">datalist</g>. I need something that really completes the input text.

    Tuesday, January 15, 2019 5:44 PM
  • User475983607 posted

    I know all that approaches but none of them is the one I want.

    They don't have inline autocomplete. They just filter the datalist. I need something that really completes the input text.

    Most if not all autocomplete APIs provide an interface to make remote REST calls.  For example, chosen has a "source" callback that you can use make an AJAX request, or read from a datalist, or read values from the DOM.

    Tuesday, January 15, 2019 6:10 PM
  • User283528319 posted

    Do I have to use /accomplish this with Jquery or I need <g class="gr_ gr_49 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="49" data-gr-id="49">vue</g> or something?

    Wednesday, January 16, 2019 5:02 PM
  • User475983607 posted

    Do I have to use /accomplish this with Jquery

    If you are asking if jQuery be used to build an autocomplete widget, then yes.  jQuery can build an autocomplete widget.  It's ridiculously easy to do if you are comfortable with JavaScript, HTML, and CSS.

    or I need vue or something

    We've been down this road several times and we've explained the benefits of using an SPA framework over jQuery.  The rest is up to you.

    Wednesday, January 16, 2019 5:24 PM
  • User283528319 posted

    jQuery can build an autocomplete widget.  It's ridiculously easy to do if you are comfortable with JavaScript, HTML, and CSS.

    Any luck to have a piece of code? smile

    Wednesday, January 16, 2019 6:41 PM
  • User475983607 posted

    Any luck to have a piece of code? smile

    I think you should be able to work this out given your level of programming experience.  If you run into trouble post the source code, expected results, and actual results.

    Wednesday, January 16, 2019 7:15 PM