Help with jQuery autocomplete

[WolfShade]

Hello, all,

Sorry for posting this question, here, but I couldn't find an Adobe forum for just HTML/CSS/jQuery stuff.

I am attempting to use jQuery autocomplete, and I've got the .js and .css files loaded, it's working, but there's a slight issue.  When the suggested items appear below the input text field, the 'box' that they appear in extends past the right edge of the browser in FireFox53, IE11, and Chrome56.  The horizontal slidebar appears at the bottom of the browser and presents a slider that's about half the width of the browser.  I can't figure out how to get it to go away.  Any suggestions appreciated.

V/r,

^ _ ^

[Nancy OShea]

I'm not seeing it.  Did you use the source code provided on the jQuery UI site?

Nancy

[WolfShade]

Yes, for the most part.  Instead of using an ID for the selector, I'm using a class.  But that shouldn't matter.. should it?

I'll attach a screencap.

V/r,

^ _ ^

[Nancy OShea]

Redesign it.  Your autocomplete is much larger than other elements and thus needs a lot more space to work with.  I  would put that field in the middle or on the left side where it won't collide with other elements.

[WolfShade]

In the screencap, I am typing in a field on the right side of the page; two inputs to the left is another field that is using the same array (over 27,000 items) and is doing the same thing.

V/r,

^ _ ^

[Nancy OShea]

I don't know why you're doing it this way, but I think it's going to produce a bad user experience.

27,000 items is a lot of data.  Have you got a server-side database you can query?

[WolfShade]

Yes, but I dislike using bandwidth to go back and forth querying a database with

SELECT GEO,NAME
FROM table
WHERE GEO LIKE '%#arguments.inpt#%'
ORDER BY NAME ASC

.. over and over and over.  I was handed an Excel spreadsheet with everything in it and converted it to an array.  It's quicker (almost instantaneous.)

V/r,

^ _ ^

[WolfShade]

Here is some of the code I am using.

In the header.cfm page:

<link rel="stylesheet" type="text/css" href="/style/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" href="/style/public.css" />
<link rel="stylesheet" type="text/css" href="/style/dbw.css" />
<script type="text/javascript" src="/scripts/jquery/jquery-1.11.2.min.js" />
<script type="text/javascript" src="/scripts/jquery/jquery.tablesorter.min.js" />
<script type="text/javascript" src="/scripts/jquery/jquery/UI/ui/jquery-ui.js" />

In the index.cfm page:

<input type="text" name="geoloc" id="geoloc" class="name geoloc ui-autocomplete-input" />
    ...
<script type="text/javascript">
    ...
var podArray = [  this is populated with the array of over 27k items  ]
$('#geoloc').autocomplete({source: podArray});
    ...
</script>

What could be causing this?  I thought it might be some CSS is over-riding the jQuery UI CSS, but not sure how or where.

V/r,

^ _ ^