I'm playing with the jquery.ui autocomplete script.
Please refer to this fiddle
So, instead of
colors = [['White', '#fff'], ['Black', '#000'], ['Red', '#f00'], ['Green', '#0f0'], ['Blue', '#00f']];
I'm getting data in the same array form but from a PHP script after querying database. so in my script, colors = data;
Question is I need to alter the second item in the array's display, just need to add brackets around the value. How do I do that, please?
Here's my script
$("document").ready(function(){
var data = {
"action": "test"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "GET",
dataType: "json",
url: "store2.php?target="+target, //Relative or absolute path to response.php file
data: data,
success: function(data) {
//console.log(data);
var useThis=[];
if(target=="subject")
{
useThis = [{
name: 'level',
minWidth: 'auto',
symbol: ''},
{
name: 'subject',
minWidth: 'auto',
symbol: ' > '},
{
name: 'posts',
minWidth: 'auto',
symbol: ' '},
];
}
else if(target=="location")
{
useThis = [{
name: 'level',
minWidth: 'auto',
symbol: ''}];
}
else
{
useThis = [{
name: 'level',
minWidth: 'auto',
symbol: ''}];
}
var columns = useThis;
colors = data;
//alert(selectThis);
var valueV=targetItem.attr("value");
targetItem.mcautocomplete({
showHeader: true,
columns: columns,
source: colors,
select: function(event, ui)
{
// Set the input box's value
var selectThis = $(this).attr("class").split(" ")[0];//get only the first class
if(target=="subject")
{
this.value = (ui.item ? ui.item[0] +" > " + ui.item[selectThis] : '');
}
else
{
this.value = (ui.item ? ui.item[selectThis] : '');
}
// Set the output div's value
// $('#show_subject') && $('#show_place').text(ui.item ? (target+ ' = ' + ui.item[selectThis] + ui.item[2]) : 'Select a subject');
if(target=="subject")
{
$('input[name="try"]').val(ui.item[3]);
}
if(target=="location")
{
$('input[name="lat"]').val(ui.item[1]);
$('input[name="lon"]').val(ui.item[2]);
}
if(target=="tutor")
{
$('input[name="tutor"]').val(ui.item[0]);
}
return false;
}
});
}
});
PHP
$statement1="SELECT * FROM categories,subjects WHERE categories.catid=subjects.catid";
$target=$_GET["target"];
//the "catname", "subname","subcount" and "catid" are columns names in the database. So I cannot add brackets here otherwise I won't get their values right.
$sql=$statement1;
$v_1="catname";
$v_2="subname";
$v_3="subcount";
$v_4="catid";
$stmt =connection::$pdo->prepare($sql);
$stmt->execute();
$json=array();
while($row = $stmt->fetch())
{
array_push($json,array($row[$v_1],$row[$v_2],$row[$v_3],$row[$v_4]));
}
echo json_encode($json)
SO how do I target a specific item and add brackets around it?
I added the brackets on the second item in the array :
source: jQuery.each(colors , function(index, value){
console.log(value[1]);
value[2] = "("+value[1]+")";
}),
Change the each
loop in _renderItem
function like following. Hope this will help you.
$.each(this.options.columns, function(index, column) {
var i = column.valueField ? column.valueField : index;
var itm=item[i];
if (i==1)
itm='('+item[i]+')';
t += '<span style="float:left;min-width:' + column.minWidth + ';">' + itm+'</span>'
});