Suggest/Autocomplete return value doesn't attach to #input

Hi,

I am completely lost ..

I am making use of autocomplete/suggest to return values, however the returned values are not attaching to the input text box (a nice listbox in which you can select one of the returned values). Instead the return value is added below the template as

<li>return value</li>

This is what i have

Script

jQuery(document).ready(function() {
	jQuery('input#search-box').suggest(obj_twentyfourteen.ajaxurl + '?action=twentyfourteen-ajax-users');
});

php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style_and_js'); // removed priority

function enqueue_parent_theme_style_and_js() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_script('suggest');
	wp_enqueue_script('twentyfourteen_addusertags', get_stylesheet_directory_uri() . '/js/adduserstags.js', array('jquery'), null, true);    		

	$translation_array = array( 'ajaxurl' => admin_url('admin-ajax.php'), );

	wp_localize_script('twentyfourteen_addusertags', 'obj_twentyfourteen', $translation_array);

	}

add_action('wp_ajax_twentyfourteen-ajax-users', 'twentyfourteen_ajax_users'); // page_cp_boards.php return user names

function twentyfourteen_ajax_users() {
	echo 'hi there this is a test' . "\n";
	die();
	}

html:
<input type=”text” id=”search-box”>