Highlighted

Help with jQuery autocomplete

LEGEND ,
Dec 08, 2017

Copy link to clipboard

Copied

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,

^ _ ^

Views

356

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Help with jQuery autocomplete

LEGEND ,
Dec 08, 2017

Copy link to clipboard

Copied

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,

^ _ ^

Views

357

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 08, 2017 0
Adobe Community Professional ,
Dec 08, 2017

Copy link to clipboard

Copied

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

Nancy

Nancy O'Shea, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 08, 2017 0
LEGEND ,
Dec 08, 2017

Copy link to clipboard

Copied

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,

^ _ ^

Untitled-3.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 08, 2017 0
Adobe Community Professional ,
Dec 08, 2017

Copy link to clipboard

Copied

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.

Nancy O'Shea, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 08, 2017 0
LEGEND ,
Dec 08, 2017

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 08, 2017 0
Adobe Community Professional ,
Dec 08, 2017

Copy link to clipboard

Copied

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?

Nancy O'Shea, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 08, 2017 0
LEGEND ,
Dec 08, 2017

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 08, 2017 0
LEGEND ,
Dec 11, 2017

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 11, 2017 0