Hi

Wish you have a great day!

I have a question with 500+ values in a dropdown for Outlet in a shopping mall. How I can have the autocomplete for the selection in the dropdown?

for example: type ca on the dropbox will list values contain of ca like car, card, Canada, Bankcard, Bookcase...

This will reduce the user to keep scroll in the dropdown to get the desire value.

Hi There Sheoliaw,

I have used this method with a CSV file to get what I think you need ... we did it with 200+ car brands

manual.limesurvey.org/Workarounds:_Manip...wers_for_text_inputs

I try to using method 2 for text entry autocomplete but cannot make it worked.

I saved my csv in /public_html/de/upload/templates/outlet.csv
outlet.csv value as below format
outletAAA
outletAAB
outletAAC
outletBBA
outletBBB
outletBBC
.....



I created my php in public_html/de/upload/templates/outlet.php
<?php

$outletArr = array();

$file_handle = fopen("outlet.csv", "r");

while (!feof($file_handle) ) {
$line_of_text = fgetcsv($file_handle);
array_push($outletArr, $line_of_text[0]);
}

fclose($file_handle);

echo json_encode($outletArr);

?>

my question QID 8722 in source

Question text autocomplete

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 8722;
var url = "upload/templates/outlet.php";
var dataArr = [];

$.getJSON(url,function(data){

$.each(data,function(i, item){
dataArr.push(item);
});

$('#question'+qID+' input.text').autocomplete({
source: dataArr
});

});

});

</script>

Anything i missed?

attach the question export.

I also tried the MYSQL autocomplete but no luck to get it work for autocomplete.

1. I create a short text question and insert the script below to question QID 8723

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 8723;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: 'autocomplete.php'
});

});

</script>


2. I created table MYSQL
Table outlet created in MYSQL
outletid; outlet
1,outletAAA
2,outletAAB
3,outletAAC
4,outletBBA
5,outletBBB
6,outletBBC
.....
800+ value


3. I created constant.php in /public-html/de/constant.php

<?php
// Login credentials
define('DB_SERVER', "localhost");
define('DB_USER', "myusername");
define('DB_PASSWORD', "mypassword");
define('DB_DATABASE', "mydatabasename");
define('DB_DRIVER', "mysql");
?>


4. I created databse.php in /public-html/de/database.php

<?php

// Connect and query MySQL database, using PDO
try {
$db = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER . ";charset=utf8", DB_USER, DB_PASSWORD);
}

catch(PDOException $e) {
echo $e->getMessage();
}

$return_arr = array();

if ($db)
{
$ac_term = "%".$_GET."%";
$query = "SELECT * FROM outlet WHERE outlet LIKE :term";
$result = $db->prepare($query);
$result->bindValue(":term",$ac_term);
$result->execute();

// Fetch data and store in array
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$row_array = $row;
$row_array = $row;

array_push($return_arr,$row_array);
}
}



5. I created autocomplete.php /public_html/de/autocomplete.php

<?php

// Include files outside of webroot
set_include_path('/home/pinnacl2/public_html/de');

// Fetch database credentials
require_once ('constant.php');

// Connect to database and perform query
require_once ('database.php');

// Clear query
$db = null;

// Encode results in JSON. This is required for jquery autocomplete
echo json_encode($return_arr);

?>


Not working when execute the question. anything I missed?

So here is what I did ......

1) Create the CSV file with the following fields
Make and Model
Make
Model
Make and Model Code
Make Code

so it looked like this ...

Alfa Romeo 4C, Alfa Romeo, 4C, 1, 1
Alfa Romeo Giulietta, Alfa Romeo, Giulietta, 2, 1
Alfa Romeo Mito, Alfa Romeo, Mito, 3, 1,
Aston Martin DB9, Aston Martin, DB9, 4, 2,
Aston Martin DBS ,Aston Martin, DBS, 5 2


Then I created a multiple choice with comments question that had 5 responses

Response 1 -
First alternative car make and model (please start by typing the make and select the relevant make and model) - Shown to the respondent

Responses 2-4
Make
Model
Make Model Code
Make Code

Hidden from respondents in CSS .... these were used for logic later in the survey and to punch into single choice questions for analysis

Then in the source code of the question I added the following ....

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {


var url = 'https://serveraddress/lookup/models.csv';

// Create an array to hold the names
var namesArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the names array
$(fullArray).each(function(i, item){
namesArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#answer635652X501X13198Acomment.text').autocomplete({
source: namesArr,
// Event fired when a selection is made (ui.item.value refers to the selected item)
select: function(event, ui) {
// Find the "relevant make and model" values associated with the selected name value and load those questions
$(fullArray).each(function(i, item){
if(item[0] == ui.item.value) {
$('#answer635652X501X13198Ccomment.text').val(item[1]);
$('#answer635652X501X13198Dcomment.text').val(item[2]);
$('#answer635652X501X13198Ecomment.text').val(item[3]);
$('#answer635652X501X13198Fcomment.text').val(item[4]);
}
});
}
});
});
});

</script>

As you can see from this the first section loads the first column from the CSV to the autocomplete
/ Initialise the autocomplete plugin
$('#answer635652X501X13198Acomment.text').autocomplete({

The the following section fills out the remaining hidden fields

$(fullArray).each(function(i, item){
if(item[0] == ui.item.value) {
$('#answer635652X501X13198Ccomment.text').val(item[1]);
$('#answer635652X501X13198Dcomment.text').val(item[2]);
$('#answer635652X501X13198Ecomment.text').val(item[3]);
$('#answer635652X501X13198Fcomment.text').val(item[4]);
}


Finally in the template file I included the jquery-ui autocomplete script I think this is in LS by default if not you can get it from the JQuery-UI website ...

<script type="text/javascript" src="{TEMPLATEURL}js/jquery-ui/jquery.ui.autocomplete.min.js"></script>

That worked for me ... hope this helps you out ...