Loading

Autocomplete on a text input field

General Discussion around Collabtive

Autocomplete on a text input field

Postby Remiguel » 05.07.2014, 23:40

I have, in my modified colabtive version, one text field for sponsor/customer
I didn't want to add a specific table for that. Data are saved in the Projekt table.
My problem was to let user enter new sponsor name, but also to propose entry already saved in database.
My solution have been to add an autocomplete funccion on that specific field

Add this few line in the addproject.tpl and editform.tpl

line 62
Code: Select all
div class = "row">
<label for = "sponsor">{#sponsor#}:</label>
<input type = "text" class="text" name = "sponsor" id = "sponsor" required="1" realname="{#sponsor#}" />
        <input type = "hidden" id = "test" value= "{$line}" />
            <div class="autoCompleteMenu" id="autoCompleteMenu"></div>
</div>


line 107

Code: Select all
{literal}
    <script type = "text/javascript">
        var sp = (document.getElementById('test').value).split(';');
        window.onload = function() {
        new Autocompleter.Local('sponsor','autoCompleteMenu', sp,{});       
        }
   </script>
{/literal}


Add in the index.php and manageproject.php

line 70

Code: Select all
// Lookup all available sponsors
    $spon = new project();
    $sp = $spon->getAllsponsor();
    $line = implode(";",$sp); // to pass the array in a string in an input field (not yet achieved to copy php array to js array)
    $template->assign("line", $line);


Add a new function getAllsponsor in class.project.php

Code: Select all
     /**
     * Return all sponsor in an array
     * @return $sp all sponsor
     */
    function getAllsponsor()
    {
        global $conn;
        $sel = $conn->query("SELECT DISTINCT sponsor FROM projekte");
        $sp = array();
        while ($tmp = $sel->fetch()) {
            array_push($sp, $tmp[0]);
        }
        return $sp;
    }


To have a white background and a clean design, add the following, in the style_form.css file

Code: Select all
div.autoCompleteMenu ul li {
  padding: 3px 3px 0px;
  color: #000;
  background-color:#fff;
  cursor:pointer;
}
Remiguel
 
Posts: 96
Joined: 10.06.2014, 09:34
Location: Spain / France

Re: Autocomplete on a text input field

Postby Remiguel » 02.12.2014, 23:23

Glad this code could help you ;)
Remiguel
 
Posts: 96
Joined: 10.06.2014, 09:34
Location: Spain / France


Return to General

Who is online

Users browsing this forum: No registered users

cron