JavaScript & JQuery Multi Dimensional Array Search using CSV file

Question

I have a CSV file, 2 columns Name & Image,

I’m using Javascript / PHP to read and display the list of names in an auto complete search field.

//-->This is what’s suppose to happen <--//

When the user performs a search, they type something into the text field, the auto complete drops down with all available Names matching there Query, they click Search, the loading icon is shown for a few seconds while the code checks the match, then the result is shown to the user using jQuery (was going to use slide down action to show the result, under the main #searchbox)

I’m having an trouble getting the information from the search to match my array value and bring back the related image for the Name value.. all i need is for the search field value to bring back the related image assosiated with that name... and show the image and title to the user in the result div...

The code so far is as follows..

//php to read csv file and build the array

<?php
$maxlinelength = 1000;
$fh = fopen('tartans.csv', 'r');
$firstline = fgetcsv($fh, $maxlinelength);
$cols = count($firstline);

$row = 0;
$inventory = array();

    while ( ($nextline = fgetcsv($fh, $maxlinelength)) !== FALSE )
    {
        for ( $i = 0; $i < $cols; ++$i )
                    {
       $inventory[$firstline[$i]][$row] = $nextline[$i];
    }
    ++$row;
}
fclose($fh);
?>

//Javascript & php;

Include the Names in the Auto complete script this generates the list of names from the csv, separated by commas, then using the javascript split() function it loads all the names for the auto complete to function..

<script type="text/javascript">
$(document).ready(function(){
   var data = '<?php foreach( $inventory['NAME'] as $key => $value){
                          echo $value.",";
                 }?>'.split(",");
   $("#s").autocomplete(data);
})
</script>

// the jquery to handle the form submission and return the results

<script type="text/javascript">
$(document).ready(function() {  

    $('#loader').hide();
    $('#tartanResults').hide();

    $('#submit').click(function() {
    $.ajax({
        url: '/select_tartan.php', // current page
        beforeSend: function() { 
                   $('#loader').show(); 
                },
                complete: function() { 
           $('#loader').hide();
           $('#tartanResults').show();
        }
    });
        return false;
   });// submit
});// doc ready
</srcipt>

now this is were im having trouble, trying to return the matched key value for that particular Name loaded in the array, and match it with its image,

The array is as follows using print_r($inventory); // Although its a lot larger,

Array
(
    [NAME] => Array
        (
            [0] => Abercrombie Ancient
            [1] => Abercrombie Modern
            [2] => Aberdeen Tartan Modern
            [3] => Agnew Ancient
            [4] => Allison Ancient
            [5] => Anderson Ancient
            [6] => Anderson Modern
            [7] => Anderson Weathered
            [8] => Angus Ancient
            [9] => Angus Modern
)

    [IMAGE] => Array
        (
            [0] => images/rare/abc_ar.jpg
            [1] => images/rare/abc_mr.jpg
            [2] => images/rare/abd_mr.jpg
            [3] => images/rare/agw_ar.jpg
            [4] => images/rare/all_ar.jpg
            [5] => images/rare/and_ar.jpg
            [6] => images/rare/and_mr.jpg
            [7] => images/rare/and_wr.jpg
            [8] => images/rare/ang_ar.jpg
            [9] => images/rare/ang_mr.jpg
    )
)

All i need to show is the returned Name: and the Image, much like

<?php 
   echo $inventory['NAME'][8];
   echo $inventory['IMAGE'][8];
?>

this is proving more difficult than i first thought..

any help guys is much appreciated..

Marty

// Basic Html for the page

<!-- SEARCH FORM / LOADER-->
<div id="searchbox">
<h3>FIND YOUR TARTAN <small>press enter to search.</small></h3>
<form id="tartanSearch" action="select_tartan.php" method="get">
    <div class="search">
        <input type="text" size="70" class="inputbox" alt="Search" id="s" name="search" />
        <input value="Search" id="submit" type="submit" />
    </div>
</form>
</div>
<div id="loader"><img src="images/indicator.gif" width="16" height="16" /></div>

// Where the Results are loaded (hopefully slide down animation)

<!-- RESULTS -->
<div id="tartanResults">
  <h3><!-- WERE THE NAME LOADS --></h3>
  <div class="tartan_img"><!-- WERE THE IMAGE LOADS --></div>
  <div class="tartan_text">
    <ul style="list-style:none;">
      <li>Description text here</li>
      <li>With more text here aswell</li>
      <li>We can have some here also</li>
    </ul>
  </div>
</div>

Answer 1

I'm sure there are much more answers to your problem, but this is the simplest one based on what you wrote so far:

1. Create new file ONLY for outputting search results. Of course you should share the code for loading CSV to array by wrapping it in function and include in both files (main one and new one)
2. Your main page should have div with the results (id="tartanResults") empty.
3. Your ajax call should load the results of the call to this div
4. Your new action should return the results of the search (in a form of current DIV contants)

Here are some code samples

New look of the results div on main page

<!-- RESULTS -->
<div id="tartanResults">
</div>

File with utility function (utility.php for example)

<?php
function loadCSVContents($fileName)
{
    $maxlinelength = 1000;
    $fh = fopen($fileName, 'r');
    $firstline = fgetcsv($fh, $maxlinelength);
    $cols = count($firstline);

    $row = 0;
    $inventory = array();

    while ( ($nextline = fgetcsv($fh, $maxlinelength)) !== FALSE )
    {
        for ( $i = 0; $i < $cols; ++$i )
           $inventory[$firstline[$i]][$row] = $nextline[$i];
        ++$row;
    }
    return $inventory;
    fclose($fh);
}
?>

File with new action (tartansearch.php for example)

<?php

include('utility.php');
$inventory = loadCSVContents('tartans.csv');

$search = $_POST['search'];
$resultName = '';
$resultImage = '';
if ($search)
{
    $arr_key = array_search($search, $inventory['NAME']);
    $resultName = $inventory['NAME'][$arr_key];
    $resultImage = $inventory['IMAGE'][$arr_key];
}
?>
<h3><?php echo $resultName?></h3>
<div class="tartan_img"><img src="<?php echo $resultImage?>" /></div>
<div class="tartan_text">
  <ul style="list-style:none;">
    <li>Description text here</li>
    <li>With more text here aswell</li>
    <li>We can have some here also</li>
  </ul>
</div>

AJAX call

$.ajax({
    url: '/tartansearch.php', // search page
    beforeSend: function() { 
       $('#loader').show(); 
    },
    complete: function() { 
        $('#loader').hide();
        $('#tartanResults').show();
    },
    success: function(data) {
        $('#tartanResults').html(data);
    }
});

This is only an entry point. For example, you'll probably want to use more sophisticated function than array_search for actually finding the index. You should take care of error reporting. Most basic of all, you should not use CSV file but the database (if possible).

I cannot also guarantee that I haven't made any mistakes in this code. But I think you will work those out.