Search from start


i have this code which i thought was perfect until i decided to search a name

this is the search / drop down menu script

$TPL_team1 = '<span class="input-group-addon"><input class="form-control" type="text" id="atype_team1" onkeyup="javascript:searchSel();"/></span><span class="input-group-addon"><select name="atype_team1" id="realitems">' . "\n";
        foreach ($system->SETTINGS['sports'] as $teams => $val)
            $TPL_team1 .= "\t" . '<option value="' . $teams . '" ' . (($teams == $atype_team1) ? 'selected="true"' : '') . '>' . $val . '</option>' . "\n";
        $TPL_team1 .= '</select></span>' . "\n";

this controls the result

public function loadGameTeams()
        global $db, $DBPrefix;
        $query = "SELECT team_id, teams FROM " . $DBPrefix . "sports ORDER BY teams asc";
        $this->SETTINGS['sports'] = [];
        while ($row = $db->fetch())
            $this->SETTINGS['sports'][$row['team_id']] = $row['teams'];

instead of searching for the first letter or number it picks them ramdomly

for example if i start typing china its start and show achilles instead of chi.... before it shows china full hope u guys understand.


I think you'd need to show the code for searchSel().


hi droop its not fully search per say i just built it to look look one this way i dont stroll down looking for a name oh its like auto complete


It sounds like you need to implement debouncing.

I haven't read this article but it is the first one that showed up explaining debouncing.


I get that, but the code you posted doesn't seem to handle the situation you are describing, that seems to be done in the searchSel() function, which we can't see. Your query as you show it doesn't have any selection criteria, so something else must be looking at what you type, and narrowing down the contents of the drop-down.


oh okay its a javascript

     <script type="text/javascript">document.getElementById('atype_team1').onkeyup = searchSel;
function searchSel() 
      var input = document.getElementById('atype_team1').value.toLowerCase();
          len = input.length;
          output = document.getElementById('realitems').options;
      for(var i=0; i<output.length; i++)
          if (output[i].text.toLowerCase().indexOf(input) != -1 ){
          output[i].selected = true;
      if (input == '')
        output[0].selected = true;

that the last of the code


This line here

 if (output[i].text.toLowerCase().indexOf(input) != -1 ){

is probably the issue. Your JS code gets what is typed in the text box, then loops through the options contained in your drop-down list. As soon as it finds one that contains the text you've typed, it selects it. indexOf in this case works in a similar fashion to strpos()in PHP. If you only want to find a selection that begins with the text, you could look at startsWith() or probably lots of other ways - I don't know much JavaScript.


oh okay thanks am not Javascript guy will d guys over at javascript section


closed #9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.