Response title
This is preview!
Move this topic
Jquery UI autocomplete
in Using jQuery UI
•
8 years ago
Hello Guys,
I think you know the search engine of facebook with autosuggestion.
it shows the profile photo of the members on the left site and name
and city on the right side, see the image...
Could you please give me some hints, how can I configure the
styling of the return data from data base to get something like that.
You can give me some links about that.
thx
1
Replies(6)
Re: Jquery UI autocomplete
8 years ago
Leave a comment on jakecigar's reply
Re: Jquery UI autocomplete
8 years ago
Ahmed,
Take a look at this demo and its View Source. It is similar,
and may be a starting point for you.
Leave a comment on mike_laird's reply
Re: Jquery UI autocomplete
8 years ago
Hello,
I have now this code
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>jQuery UI Autocomplete - Custom data and display</title>
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
- <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
- <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
- <link rel="stylesheet" href="/resources/demos/style.css">
- <style>
- #project-label {
- display: block;
- font-weight: bold;
- margin-bottom: 1em;
- }
- #project-description {
- margin: 0;
- padding: 0;
- }
- #project{
- margin: 0px;
- padding:0px;
- }
- *{
- margin: 0px;
- padding: 0px
-
- }
- </style>
-
-
-
- <script>
- $(function() {
- var projects = [
- {
- value: "jquery",
- label: "jQuery",
- desc: "the write less, do more, JavaScript library",
- icon: "./images/favicon.png"
- },
- {
- value: "jquery-ui",
- label: "jQuery UI",
- desc: "the official user interface library for jQuery",
- icon: "./images/favicon.png"
- },
- {
- value: "sizzlejs",
- label: "Sizzle JS",
- desc: "a pure-JavaScript CSS selector engine",
- icon: "./images/favicon.png"
- }
- ];
- $( "#project" ).autocomplete({
- minLength: 0,
- source: projects,
- focus: function( event, ui ) {
- $( "#project" ).val( ui.item.value );
- return false;
- },
- select: function( event, ui ) {
- //$( "#project" ).val( ui.item.label );
- $( "#project-id" ).val( ui.item.value );
- //$( "#project-description" ).html( ui.item.desc );
- //$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
- return false;
- }
- })
- .autocomplete( "instance" )._renderItem = function( ul, item ) {
- return $( "<li style='width:160px;font-size:12px'>" )
- .append( "<a> <div style='overflow:hidden'><table><tr><td><img src='" + item.icon + "' width='30' height='30'></td><td>" + item.label + "<br>" + item.desc + "</td><tr></table></div></a>")
- .appendTo( ul );
- };
- });
- </script>
- </head>
- <body>
- <input id="project">
- <input type="hidden" id="project-id">
-
- </body>
- </html>
my questions:
- How can I style the results so that the result's box not bigger than the input field, see the arrow in the image.
- How can I edit the margin of singles result's content, see the black line above on the image
thx in advance
Leave a comment on Ahmed ALMughalles's reply
Re: Jquery UI autocomplete
8 years ago
I don't do much with styling of Autocomplete or jQuery for that
matter, but here are some thoughts.
1. I think the mismatch in dropdown versus input box comes from
your line 75 in the post. Try changing 160px to something a bit smaller.
2. I'm uncertain about the source of the top margin. Maybe its
because your image is not really 30px high. They look like they
don't fill the left side space. You also might try using
border-box instead of table and tr. You could have an outside
border-box div with 2 div elements in it set to in-line. The last
idea is to take a look at this tutorial. He does impressive things
with images in dropdowns.
Leave a comment on mike_laird's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Ahmed ALMughalles's question
Statistics
- 6 Replies
- 1516 Views
- 1 Followers