Autoseggestion styling

[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?

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

[LastMitch]

@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.

[DamzWildfire]

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]

@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/

[DamzWildfire]

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

[LastMitch]

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('');
});
});

[broj1]

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.

[DamzWildfire]

@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;
}

[broj1]

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.

[DamzWildfire]

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]

@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

[DamzWildfire]

doesnt seem to work

[broj1]

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.

[DamzWildfire]

@broj1 Sent check message

[DamzWildfire]

@broj1 anything yet

[broj1]

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;
}

[broj1]

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('');
                });
                */
            });    
        };  
    });
});

[DamzWildfire]

Thanks @broj1 helped alot

[broj1]

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

[DamzWildfire]

yeah