autocomplete in dropdown with long value list

More
10 months 1 week ago #162302 by sheonliaw
sheonliaw created the topic: autocomplete in dropdown with long value list
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.

Please Log in or Create an account to join the conversation.

More
10 months 1 week ago #162305 by davebostockgmail
davebostockgmail replied the topic: autocomplete in dropdown with long value list
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
The following user(s) said Thank You: sheonliaw

Please Log in or Create an account to join the conversation.

More
10 months 1 week ago #162341 by sheonliaw
sheonliaw replied the topic: autocomplete in dropdown with long value list
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.

Please Log in or Create an account to join the conversation.

More
10 months 1 week ago #162344 by sheonliaw
sheonliaw replied the topic: autocomplete in dropdown with long value list
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?

Please Log in or Create an account to join the conversation.

More
10 months 1 week ago - 10 months 1 week ago #162346 by davebostockgmail
davebostockgmail replied the topic: autocomplete in dropdown with long value list
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 ...
Last Edit: 10 months 1 week ago by davebostockgmail.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!