Div containing dynamically generated list that appears when input is entered

Question 1

Question by Jordan

Essentially I’m trying to create the HTML/CSS for an auto-complete. I want it to look/behave roughly like the one here: http://www.skyscanner.com/ (type into From or To fields)

I’m not worrying about actually making the auto-complete work, I just want to create the HTML/CSS that it would use to show the list of text items generated by the auto-complete.

This is the basic layout I’m hoping to make:

enter image description here

Input box 1 and Input box 2 are what I currently have. When the user clicks in one of these input boxes, I want the corresponding auto-complete box (which at this point will show fake data) to appear.

Unfortunately I can’t think of how I would do something like this. Can anyone get me started or point me in the right direction?

Answer

Answer by D. Strout

D. Strout

The basic idea is to have a parent element that is positioned relatively to the page, but without moving it. Since this element is positioned (not static), you can position the suggest box absolutely relative to the parent element, under the text box. Since it is positioned absolutely, it does not affect document flow, a.k.a. it appears over other elements that are below the text box. Something like this should work:

HTML:

<span class="tbSuggestParent">
<input type="text" class="tbSuggest">
<span class="suggestions"><!-- Suggestions go here --></span>
</span>

CSS:

.tbSuggestParent {
    position: relative;
    display: inline-block;
}

.tbSuggest {
    width: 200px;
    height: 30px;
    font-family: Arial;
    font-size: 14pt;
    border: 2px solid black;
    border-radius: 2px;
}

.suggestions {
    position: absolute;
    width: 170px;
    height: 300px;
    top: 36px;
    left: 15px;
    border: 1px solid black;
    border-radius: 2px;
    display: inline-block;
    background-color: white;
}

This includes rounded borders as your image seems to show, using border-radius. If that property is not available in a given browser, it should just use regular borders.

Demo (includes text underneath): http://www.dstrout.net/pub/suggest.htm

Answer

Answer by Starx

Starx

Here is a simple way

Wrap your elements in a div. Why? It avoids you from using a lot of unnecessary styles

Set the div to be positioned as relative, then the autocomplete box will be automatically aligned to the input the box and the container.

Here is the markup I Suggest.

<div class="field">
     <input type="text" />
     <ul class ="autocomplete">
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
          <li>Option 4</li>
          <li>Option 5</li>
     </ul>
</div>

Demo

Question 2

Question by Bashanta Dahal

Bashanta Dahal

I have tried to implement dynamic autocomplete in my program. It is working perfectly after first input. But it doesn’t show suggestions for the first attempt. However, server is responding the required source for autocomplete. Here is my code.

       $('.autocomplete').live('keyup', function(){
        $this = $(this);
        var search = $this.val();
        $.ajax({
            url:'/package/index/search/keyword/'+search+'/format/json',
            async: false,
            success: function(res){
                //console.log(res.options);
                //console.log(res.defined_ids);
                staticObject = res.defined_ids;
                $this.autocomplete({
                    source: res.options
                });
            }
        });            
    });

Server side Code is

    $keyword = $this->_getParam('keyword');
    $elementDetailModel = new Package_Model_ElementDetail();
    $arr = $elementDetailModel->searchElementDetail($keyword);
    $this->view->options = $arr['options']; // returns in the format array("test2","my new test", "night stay in delux room")
    $this->view->defined_ids = $arr['defined_ids']; // returns in the format array(21::21=>"test2", 22::22=>"my new test", 24::24=>"night stay in delux room")

when I console logged defined_ids and options in firebug, I got following response when I typed ‘t’ in the text field.
options:

[“test2”, “my new test”, “night stay in delux room”]

defined_ids:

Object { 21::21=”test2″, 22::22=”my new test”, 24::24=”night stay in delux room”}

Any help would be appreciable. Thanks in advance.

Answer

Answer by Starx

Starx

The format displayed from the firebug, is not that of a JSON. It is an array, which are accessed using indices.

When you are displaying the output, make sure you json_encode() the array first, then display it.

For example, with respect to the question, you final array should look something like this

$array['options'] = array("test2", "my new test", "night stay in room");
//Then you should echo the encoded the array to json

echo json_encode($array);

Next, make sure you views are turned off this request.

Tag: autocomplete

Div containing dynamically generated list that appears when input is entered

Question by Jordan

Answer by D. Strout

Answer by Starx

jQuery autocomplete not working for the first attempt

Question by Bashanta Dahal

Answer by Starx

Please fill the form - I will response as fast as I can!