Menu icon Foundation
jQuery Autocomplete inside Modal

Is there any known issues (I apologize if I didn't find it, I looked everywhere I can think of) with using a jquery autocomplete inside a modal? The datepicker I'm using elsewhere works perfectly fine. But the ui menu never shows up. It does however get generated, as seen in the attached image. It's just not shown. I tried changing the z-index to no effect. Am I just missing something obvious?

Edit: Should have mentioned, I am using knockout for data binding if it's relevant.

<div id="criteriaModal" class="reveal-modal small" data-reveal="data-reveal">
    <form id="frmCriteria" data-abide="ajax">
        <fieldset>
            <legend>Origin Info</legend>
            <div class="row collapse">
                <div class="small-2 columns">
                    <span class="prefix">City</span>
                </div>
                <div class="small-10 columns">
                    <input id="txtOriginCity" type="text" data-bind="value: OriginCity"/>
                </div>
            </div>
     </fieldset>
  </form>
</div>           

         

            $("#txtDestinationCity").autocomplete({
                source: function (request, response) {
                    var results = $.ui.autocomplete.filter(CityArray, request.term);
                    response(results.slice(0, 10));
                },
                minLength: 3
            });
            

         

Autocomplete

jqueryautocompletemodal

Is there any known issues (I apologize if I didn't find it, I looked everywhere I can think of) with using a jquery autocomplete inside a modal? The datepicker I'm using elsewhere works perfectly fine. But the ui menu never shows up. It does however get generated, as seen in the attached image. It's just not shown. I tried changing the z-index to no effect. Am I just missing something obvious?

Edit: Should have mentioned, I am using knockout for data binding if it's relevant.

<div id="criteriaModal" class="reveal-modal small" data-reveal="data-reveal">
    <form id="frmCriteria" data-abide="ajax">
        <fieldset>
            <legend>Origin Info</legend>
            <div class="row collapse">
                <div class="small-2 columns">
                    <span class="prefix">City</span>
                </div>
                <div class="small-10 columns">
                    <input id="txtOriginCity" type="text" data-bind="value: OriginCity"/>
                </div>
            </div>
     </fieldset>
  </form>
</div>           

         

            $("#txtDestinationCity").autocomplete({
                source: function (request, response) {
                    var results = $.ui.autocomplete.filter(CityArray, request.term);
                    response(results.slice(0, 10));
                },
                minLength: 3
            });
            

         

Autocomplete
Mikhail Svirkin over 4 years ago

Hi!

In your very first HTML block there is no element with id=txtDestinationCity.
But in your JQ part autocomplete attached to element with id=txtDestinationCity.

May that is a problem?

P.S. I see in the very bottom part txtDestinationCity is mentioned but I do not know how that's all connected together.

Tyler Siron over 4 years ago

Hi Mikhail,

Sorry I actually posted the incorrect jQuery, the markup and ID match on my side, that wasn't the issue.

I did however find the issue, just in case anyone else runs into it.

I had tried the jquery autocomplete.appendTo option before, but I was appending it to the wrong element ( I was trying to append it to the input element). It needs to be appended to the modal itself, as in:

             $("#txtDestinationCity").autocomplete({
                source: function (request, response) {
                    var results = $.ui.autocomplete.filter(CityArray, request.term);
                    response(results.slice(0, 10));
                },
                minLength: 3,
                appendTo: "#frmCriteria"
            });