Member Avatar for anmol.raghuvanshi1

There is long registration form I have one auto-complete box like StackOverflow tag bar will have multiple tags of country. Now I want without redirecting to another page or any thing else. I want names of country to be displayed from database. I am successful in displaying without database like given below... I am using codeigniter. I really don't know how to do it...here is the code

<label for="wish_city">Cities I Want to Visit:</label>
<!--<input type="password" id="password" name="conf_password" placeholder="">-->
<?=form_input(array("name"=>"wish_city","value"=>set_value("wish_city"),"placeholder"=>"Country want to visit",'id'=>'wish_city'))?>

My script

<!-- script for autocomplete with multiple options -->       
          <script type="text/javascript">
    $(document).ready(function() {
        $("#wish_city").tokenInput([
            {id: 7, name: "Ruby"},
            {id: 11, name: "Python"},
            {id: 13, name: "JavaScript"},
            {id: 17, name: "ActionScript"},
            {id: 19, name: "Scheme"},
            {id: 23, name: "Lisp"},
            {id: 29, name: "C#"},
            {id: 31, name: "Fortran"},
            {id: 37, name: "Visual Basic"},
            {id: 41, name: "C"},
            {id: 43, name: "C++"},
            {id: 47, name: "Java"}
        ]);
    });
    </script>
Member Avatar for diafol

Not sure how your script connects to your markup. Cities - Languages? Haven't used CI in years, but if you want to get your data into JS on page load - you can query your DB and get json output, otherwise you'd have to do a lookahead / ajax lookup on every keystroke, which could be 'expensive'.

If you need to do this, conside the Twitter Typeahead / Bloodhound script: https://github.com/twitter/typeahead.js/

I recently used this successfully in a Laravel project. But not sure if you can add multiple "tags" to a single input.

Otherwise, in your view, you could do something like this in order to load all countries on view load:

$(document).ready(function() {
   var data = <?=$countries?>;
   $("#wish_city").tokenInput(data);
});

I think you could do something like this (in 'countries_model' model):

function getCountries()
{
    $sql = 'SELECT `id`, `name` FROM countries ORDER BY `name`';
    $query = $this->db->query($sql);
    return $query->result();
}

Used thus in your controller:

$this->load->model('countries_model');

$countries = json_encode( $this->countries_model->getCountries() );
$data = ['countries'=>$countries, ...other items...];
$this->load->view('searchpage', $data);

Hope it works, but as I said, not used CI for years and v. rusty.

Member Avatar for anmol.raghuvanshi1

Hello difaol it's good to see any one replied i am using tokeninput plugin for that i will try your code and let's waht happens

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.