1,105,340 Community Members

Autoseggestion styling

Member Avatar
DamzWildfire
Junior Poster in Training
51 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

hey i want to add this code to a jquery file that i have to display the autosuggestion results.when its in the body of my other page when the result is recieved it pushes the page down when clicked it goes back up i dont want that. any suggestion?

<div class="dropdown">
<ul class="result">
</ul>
</div>
LastMitch
Deleted Member
 
0
 

@DamzWildfire

hey i want to add this code to a jquery file that i have to display the autosuggestion results.when its in the body of my other page when the result is recieved it pushes the page down when clicked it goes back up i dont want that. any suggestion?

Post the <div> tags won't help much. You need to post your JQuery/Javascript code to see how it works.

Member Avatar
DamzWildfire
Junior Poster in Training
51 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Jquery Code

    $(document).ready(function() {
    $('.autosuggest').keyup(function () {
    var search_term = $(this).attr('value');
    // read the values of the select elements (drop downs)
    // read the value of category
    var category=$('#category').attr('value');
     // if we have less than 3 chars just exit the function
     // if(search_term.length >= 3) {
    //  return;

    // this is the conditions you will post over to the searchApp.php script
    // assembled here for clarity
    var conditions = {
    'search_term' : search_term,
    'category' : category
    };
    //};
    // just for debugging
    // alert(conditions.toSource());
    // post the conditions over to the searchApp.php script
    $.post('ajax/searchApp.php', conditions, function(data) {
    //alert(data);
    $('.result').html(data);

    // you can sort this out yourself

    $('.result li').click(function() {
    var result_value=$(this).text();
    $('.autosuggest').attr('value',result_value);
    $('.result').html('');
    });

    });
   });
 });
/*// JavaScript Document
$(document).ready(function(){
$('.autosuggest').keyup(function (){
    var search_term=$(this).attr('value');
    //var category=$(this).attr('value');
    $.post('ajax/searchApp.php',{search_term:search_term},function(data){   
        //alert(data);
        $('.result').html(data);
        $('.result li').click(function()
        {
            var result_value=$(this).text();
            $('.autosuggest').attr('value',result_value);
            //alert(result_value);
            $('.result').html('');

            });
        });
    });

//});// JavaScript Document*/
LastMitch
Deleted Member
 
0
 

@DamzWildfire

The html code you provided is very incomplete. I realized that you are asking someone to write the whole html code with your JQuery.

I don't write code I only help you half way but so far you only provide <div> tags?

Used this code instead because the html code makes more sense than yours:

http://papermashup.com/jquery-php-ajax-autosuggest/

Member Avatar
DamzWildfire
Junior Poster in Training
51 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

wasnt asking to write html code already have my html code just need the help.

LastMitch
Deleted Member
 
0
 

wasnt asking to write html code already have my html code just need the help.

Help With what? You only provide a <div> & <ul> tags.

This is you HTML:

<div class="dropdown">
<ul class="result">
</ul>
</div>

I don't know what is the "<div class="dropdown">" for?

This is the JQuery that is related to your <ul class="result">:

$.post('ajax/searchApp.php', conditions, function(data) {
//alert(data);
$('.result').html(data);
// you can sort this out yourself
$('.result li').click(function() {
var result_value=$(this).text();
$('.autosuggest').attr('value',result_value);
$('.result').html('');
});
});
Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
1
 

So you are saying that the dropdown div is pushing the content down to make room for autosuggestions? If yes, post the CSS for the dropdown class.

Member Avatar
DamzWildfire
Junior Poster in Training
51 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

@broj1 yeah that what its doing. CSS

@charset "UTF-8";
/* CSS Document */


.autosuggest, .dropdown, .result{
    margin:0;
    border:0;
    padding:0;
    width:120px;
    font-weight:bold;
    font-size:12px;

}

.autosuggest{
padding:2px;
border:0px solid #000;

}

.result{
width:126px;
list-style:none;

}

.result li
{
    padding:5px;
    border:1px solid #000;
    border-top:0;
    cursor:pointer;


}

.result li:hover
{
background:#000;
color:#FFF;
}
Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

I am not an expert in CSS so I will give it a try but I do not claim I am 100% right.

JQuery function puts the result in the ul element. For this reason the ul element grows and pushes the content below it further down. If you want it not to affect the contents around it the position property should be set to absolute while the position of the parent element (div with class=dropdown) should be set to relative (so the absolute works on ul). Also the z-index property of the ul element should be set to something high, say 10000, so you make sure the autosuggested list is above all other elements.

Member Avatar
DamzWildfire
Junior Poster in Training
51 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

so the CSS would now look like this :

@charset "UTF-8";
/* CSS Document */


.autosuggest, .dropdown, .result{
    position:relative;
    margin:0;
    border:0;
    padding:0;
    width:120px;
    font-weight:bold;
    font-size:12px;

}

.autosuggest{
padding:2px;
border:0px solid #000;

}

.result{
width:126px;
list-style:none;
position:absolute;
top:100000px;
}

.result li
{

    padding:5px;
    border:1px solid #000;
    border-top:0;
    cursor:pointer;


}

.result li:hover
{
background:#000;
color:#FFF;
}
LastMitch
Deleted Member
 
0
 

@DamzWildfire

Take away the width in either one:

.autosuggest, .dropdown, .result{
position:relative;
margin:0;
border:0;
padding:0;
width:120px;
font-weight:bold;
font-size:12px;
}

.result{
width:126px;
list-style:none;
position:absolute;
top:100000px;
}

You have 2 different width in the same .result.

There should be only 1 width for .result

Member Avatar
DamzWildfire
Junior Poster in Training
51 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

doesnt seem to work

Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

Post the complete html, css and ajax code, plus the database structure with some data (in CREATE TABLE... and INSERT INTO.. SQL statements, so I can just copy them to phpmyadmin) and I can have a look at it tomorow if time permits. You can also send it to my PM if you prefer.

Member Avatar
DamzWildfire
Junior Poster in Training
51 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

@broj1 Sent check message

Member Avatar
DamzWildfire
Junior Poster in Training
51 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

@broj1 anything yet

Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

Well it is only the css that has to be mended. It works for me if the div with the class="dropdown" has position absolute and high z-index value:

.dropdown {
    position: absolute;
    z-index: 10000;
}
Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
1
 

There are two small glitches:

  1. if there are no results in the list yet, you get a small div displayed anyway.
  2. if you have three characters and delete one, two or three, the list won't update

That is why I corrected the javascript code to the following:

$(document).ready(function() {

    $('.dropdown').hide();

    $('.autosuggest').keyup(function (e) {

        // we also have to check if user is deleting entries
        // in that case less than 3 characters also trigger suggestion
        isDelete = false;

        // if delete or backspace were pressed, 
        // less than 3 characters also trigger suggestion
        if( e.which == 8 || e.which == 46) {

            isDelete = true;;
        }

        var search_term = $(this).attr('value');

        // if search term does not exist or
        // if it is less than 3 chars and user hasn't deleted any chars
        // then hide the list
        if(
            search_term.length == 0 || 
            (search_term.length < 3 && isDelete == false)
        ) {

            $('.dropdown').hide();

        } else {

            $('.dropdown').show();
        }


        // check if we have at least 3 characters or user is deleting characters
        if(search_term.length >= 3 || isDelete == true) {

            // read the values of the select elements (drop downs)
            // read the value of category
            var category=$('#category').attr('value');

            // this is the conditions you will post over to the searchApp.php script
            // assembled here for clarity
            var conditions = {

                'search_term' : search_term,
                'category' : category
            };

            // alert(conditions.toSource());

            // post the conditions over to the searchApp.php script
            $.post('ajax/searchApp.php', conditions, function(data) {

                //alert(data);
                $('.result').html(data);
                /*
                // you can sort this out yourself
                $('.result li').click(function() {

                    var result_value=$(this).text();
                    $('.autosuggest').attr('value',result_value);
                    //alert(result_value);
                    $('.result').html('');
                });
                */
            });    
        };  
    });
});
Member Avatar
DamzWildfire
Junior Poster in Training
51 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Thanks @broj1 helped alot

Member Avatar
broj1
Posting Virtuoso
1,578 posts since Jan 2011
Reputation Points: 220 [?]
Q&As Helped to Solve: 219 [?]
Skill Endorsements: 21 [?]
Featured
 
0
 

You are welcome. Do not forget to mark as solved when solved.

Question Answered as of 1 Year Ago by broj1 and LastMitch
Member Avatar
DamzWildfire
Junior Poster in Training
51 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

yeah

You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article