Suchfunktion kehrt nicht Ergebnis

Funktionalität:Suchfunktion kehrt nicht Ergebnis

Der Benutzer kann eine Suche auf Bildquelle tun, und wenn Sie auf Suche wird die richtige Bildquelle zurück.

Was ich getan habe:

Haben ein Sucheingabefeld erstellt und wenn der Benutzer auf dem Eingabefeld klickt, eine Bildschirmtastatur wird (Einblenden) angezeigt werden. Der Benutzer wird auf die Tastatur klicken, um das Zeichen einzugeben. Anschließend kann der Benutzer entweder auf die Schaltfläche Suchen klicken, um mit der Suche zu beginnen, oder die Suche beginnt, wenn die Zeichen in das Textsuchfeld geschrieben werden.

Haben Sie den Code zum Nachlesen angehängt:

var shift = false, 
 
    capslock = false; 
 
var $write; 
 
var slideDuration = 1200; 
 
$(function() { 
 
    $("#SearchField").focus(function() { 
 
    $write = $('#SearchField'); 
 
    $("#keyboard").show(); 
 
    }); 
 

 
    //Search Image Brand Function 
 
    $("#SearchField").keyup(function() { 
 
    var userInput = $(this).val().toLowerCase(); 
 

 
    console.log("here"); 
 

 
    $("#list img").each(function() { 
 

 
     $this = $(this), 
 
     imageName = $this.attr('src').split('/'); // Split src by '/' 
 

 
     // Get last part (filename) 
 
     imageName = imageName.pop(); 
 

 
     // Remove extension 
 
     imageName = imageName.split('.')[0]; 
 

 
     // Show images with matching filename 
 
     $this.toggle(imageName.indexOf(userInput) >= 0); 
 
    }); 
 
    }); 
 
}); 
 

 
$("#SearchField").click(function() { 
 
    $('#SearchKeyBoard').fadeIn({ 
 
     duration: slideDuration, 
 
     queue: false, 
 
     complete: function() { 
 
     $('#Search_keyboard li').off('click').on('click', function() { 
 
      console.log("click"); 
 
      idleTime = 0; 
 

 
      var $this = $(this), 
 
      character = $this.html(); // If it's a lowercase letter, nothing happens to this variable 
 
      console.log(character); 
 
      // Shift keys 
 
      if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { 
 
      $('.letter').toggleClass('uppercase'); 
 
      $('.symbol span').toggle(); 
 

 
      shift = (shift === true) ? false : true; 
 
      capslock = false; 
 
      return false; 
 
      } 
 

 
      // Caps lock 
 
      if ($this.hasClass('capslock')) { 
 
      $('.letter').toggleClass('uppercase'); 
 
      capslock = true; 
 
      return false; 
 
      } 
 

 
      // Delete 
 
      if ($this.hasClass('delete')) { 
 
      var html = $write.val(); 
 

 
      $write.val(html.substr(0, html.length - 1)); 
 
      return false; 
 
      } 
 

 
      // Clear 
 
      if ($this.hasClass('clear')) { 
 
      var html = $write.val(); 
 

 
      $write.val(""); 
 
      return false; 
 
      } 
 

 
      // Special characters 
 
      if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); 
 
      if ($this.hasClass('space')) character = ' '; 
 
      if ($this.hasClass('tab')) character = "\t"; 
 
      if ($this.hasClass('return')) character = "\n"; 
 

 
      // Uppercase letter 
 
      if ($this.hasClass('uppercase')) character = character.toUpperCase(); 
 

 
      // Remove shift once a key is clicked. 
 
      if (shift === true) { 
 
      $('.symbol span').toggle(); 
 
      if (capslock === false) $('.letter').toggleClass('uppercase'); 
 

 
      shift = false; 
 
      } 
 
      // Add the character 
 
      $write.val($write.val() + character); 
 
     }); 
 
     } 
 
    }); 
 
    }) 
 
    //Search Image Brand Function 
 

 
function Search() { 
 
    //var userInput = $(this).val().toLowerCase(); 
 

 
    console.log("here"); 
 

 
    $("#list img").each(function() { 
 

 
    $this = $(this), 
 
     imageName = $this.attr('src').split('/'); // Split src by '/' 
 

 
    // Get last part (filename) 
 
    imageName = imageName.pop(); 
 

 
    // Remove extension 
 
    imageName = imageName.split('.')[0]; 
 

 
    // Show images with matching filename 
 
    $this.toggle(imageName.indexOf(userInput) >= 0); 
 
    }); 
 
}

/* Keyboard CSS*/ 
 

 
.keyboard { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.keyboard li { 
 
    font-size: 20px; 
 
    float: left; 
 
    margin: 2 2 2 2; 
 
    width: 65px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    color: #000; 
 
    background: #ffffff; 
 
    border: 1px solid #000; 
 
    -moz-border-radius: 5px; 
 
    list-style: none; 
 
    -webkit-border-radius: 5px; 
 
} 
 
.capslock, 
 
.tab, 
 
.left-shift { 
 
    clear: left; 
 
} 
 
.keyboard .tab, 
 
.keyboard .delete { 
 
    width: 165px; 
 
} 
 
.keyboard .capslock { 
 
    width: 101px; 
 
} 
 
.keyboard .return { 
 
    width: 101px; 
 
} 
 
.keyboard .left-shift { 
 
    width: 165px; 
 
} 
 
.keyboard .right-shift { 
 
    width: 165px; 
 
} 
 
.lastitem { 
 
    margin-right: 0; 
 
} 
 
.uppercase { 
 
    text-transform: uppercase; 
 
} 
 
.keyboard .space { 
 
    clear: left; 
 
    width: 685px; 
 
} 
 
.on { 
 
    display: none; 
 
} 
 
.keyboard li:hover { 
 
    position: relative; 
 
    top: 1px; 
 
    left: 1px; 
 
    border-color: #e5e5e5; 
 
    cursor: pointer; 
 
} 
 
#Search { 
 
    position: absolute; 
 
    top: 750px; 
 
    left: 800px; 
 
    z-index: 100; 
 
    outline: 0; 
 
    border: 0; 
 
    background: transparent; 
 
}

<div id="Vivo_ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; z-index=3; top:0px; left:0px;"> 
 
    <input type="text" id="SearchField" style="position:absolute; top:190px; left:660px; height:40px; width:600px; outline=0px; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent; z-index=4;" src="lib/VivoCity/img/transparent.png"> 
 
    <div class="Container"> 
 
    <div id="list" class="innerScroll"> 
 
     <!--1st Row--> 
 
     <img id="Brand_1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" data-brand="1"> 
 
     <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" data-brand="2"> 
 
     <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" data-brand="3"> 
 
     <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" data-brand="4"> 
 

 
     <!--2nd Row--> 
 
     <img id="Brand_5" style="width:284px; height:140px; top:140px; left:0px; border:0px;" onclick="selectBrand('5');"> 
 
     <img id="Brand_6" style="width:284px; height:140px; top:140px; left:330px; border:0px;" onclick="selectBrand('6');"> 
 
     <img id="Brand_7" style="width:284px; height:140px; top:140px; left:650px; border:0px;" onclick="selectBrand('7');"> 
 
     <img id="Brand_8" style="width:284px; height:140px; top:140px; left:965px; border:0px;" onclick="selectBrand('8');"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="SearchKeyBoard" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; top:0px; left:0px; z-index=4;"> 
 

 
    <ul class="keyboard" id="Search_keyboard" style="z-index:19; position:absolute;left:580px; top: 400px; color: #000000;"> 
 
    <font face="CenturyGothic"><li class="symbol"><span class="off">1</span></li></font> 
 
    <font face="CenturyGothic"><li class="symbol"><span class="off">2</span></li></font> 
 
    <font face="CenturyGothic"><li class="symbol"><span class="off">3</span></li></font> 
 
    <font face="CenturyGothic"><li class="symbol"><span class="off">4</span></li></font> 
 
    <font face="CenturyGothic"><li class="symbol"><span class="off">5</span></li></font> 
 
    <font face="CenturyGothic"><li class="symbol"><span class="off">6</span></li></font> 
 
    <font face="CenturyGothic"><li class="symbol"><span class="off">7</span></li></font> 
 
    <font face="CenturyGothic"><li class="symbol"><span class="off">8</span></li></font> 
 
    <font face="CenturyGothic"><li class="symbol"><span class="off">9</span></li></font> 
 
    <font face="CenturyGothic"><li class="symbol lastitem"><span class="off">0</span></li></font> 
 

 
    <font face="CenturyGothic"><li class="letter" style="clear: left;">q</li></font> 
 
    <font face="CenturyGothic"><li class="letter">w</li></font> 
 
    <font face="CenturyGothic"><li class="letter">e</li></font> 
 
    <font face="CenturyGothic"><li class="letter">r</li></font> 
 
    <font face="CenturyGothic"><li class="letter">t</li></font> 
 
    <font face="CenturyGothic"><li class="letter">y</li></font> 
 
    <font face="CenturyGothic"><li class="letter">u</li></font> 
 
    <font face="CenturyGothic"><li class="letter">i</li></font> 
 
    <font face="CenturyGothic"><li class="letter">o</li></font> 
 
    <font face="CenturyGothic"><li class="letter lastitem">p</li></font> 
 

 
    <font face="CenturyGothic"><li class="letter" style="clear: left;">a</li></font> 
 
    <font face="CenturyGothic"><li class="letter">s</li></font> 
 
    <font face="CenturyGothic"><li class="letter">d</li></font> 
 
    <font face="CenturyGothic"><li class="letter">f</li></font> 
 
    <font face="CenturyGothic"><li class="letter">g</li></font> 
 
    <font face="CenturyGothic"><li class="letter">h</li></font> 
 
    <font face="CenturyGothic"><li class="letter">j</li></font> 
 
    <font face="CenturyGothic"><li class="letter">k</li></font> 
 
    <font face="CenturyGothic"><li class="letter">l</li></font> 
 
    <font face="CenturyGothic"><li class="letter lastitem">z</li></font> 
 

 
    <font face="CenturyGothic"><li class="letter" style="clear: left;">x</li></font> 
 
    <font face="CenturyGothic"><li class="letter">c</li></font> 
 
    <font face="CenturyGothic"><li class="letter">v</li></font> 
 
    <font face="CenturyGothic"><li class="letter">b</li></font> 
 
    <font face="CenturyGothic"><li class="letter">n</li></fint> 
 
       <font face ="CenturyGothic"><li class="letter">m</li></font> 
 
    <font face="CenturyGothic"><li class="symbol"><span class="off">(</span></li></font> 
 
    <font face="CenturyGothic"><li class="symbol"><span class="off">)</span></li></font> 
 
    <font face="CenturyGothic"><li class="symbol"><span class="off">@</span></li></font> 
 
    <font face="CenturyGothic"><li class="symbol lastitem"><span class="off">-</span></li></font> 
 
    <font face="CenturyGothic"><li class="clear" style=" clear: left; width: 330px;">Clear</li></font> 
 
    <font face="CenturyGothic"> <li class="delete lastitem" style="width: 349px;">Backspace</li></font> 
 

 
    <font face="CenturyGothic"><li class="space lastitem">Space &nbsp;</li></font> 
 
    </ul> 
 
    <button id="Search" onclick="Search()"> 
 
    </button> 
 
</div>

Ausgabe:

Zu diesem Zeitpunkt, wenn der Benutzer das Zeichen aus der Bildschirmtastatur eingibt Die automatische Suchfunktion wird nicht von $("#SearchField").keyup(function(){..} der folgenden Methode aufgerufen . Zweitens, wenn ich auf die Schaltfläche Suchen klicke, wird auch die Suchfunktion nicht aufgerufen.

Also, was ich brauche, ist, dass, wenn Benutzer das Zeichen von der Bildschirmtastatur eingeben, die Suchfunktion aufgerufen wird und das gesuchte Bild in der Liste angezeigt wird.

Bitte helfen Sie Danke.

Quelle

2016-03-30 ernst

es die Antwort nicht funktioniert? –

@ user2352577L, es tut mir leid. Ich habe versucht, aber die Suche gibt immer noch kein Ergebnis zurück .. pls sehen den aktualisierten Code – ernst

Sie können Tastatur mit dieser '# Tastatur nicht zeigen, weil in html es ein Klassenattributwert nicht Identifikation ist und wo der Code ist, um Wert anzufügen zu Textfeld, wenn Tastaturelement angeklickt wird? – itzmukeshy7

Try this;)

Gerade nach dem Hinzufügen Charakter Trigger keyup Ereignis manuellderzeit auslösenden es nicht, weil Sie Wert aktualisieren mit Hilfe von JavaScript nicht Tastatur.

Sie haben Charakter hier Textbox ($ schreiben):

// Add the character 
/* just after adding character trigger kayup event manually here */ 
$write.val($write.val() + character).trigger('keyup');

Quelle

2016-03-30 05:56:50 itzmukeshy7

toll !! Vielen Dank!! Was gesagt wird und soweit von anderen Kommentaren, die ich verstanden habe, ist, dass die Keyup-Funktion mehr für die physische Tastatur als für die Javascript-Tastatur ist. Daher kann eine JavaScript-Tastatur das keyup-Ereignis nicht aktivieren. Um also das Keyup-Ereignis auszulösen, muss es jedes Mal ausgelöst werden, wenn ein Wert über die Javascript-Tastatur in das Textfeld eingegeben wird. – ernst

@ernst es für Sie funktioniert oder nicht? – itzmukeshy7

Ja es hat, akzeptiert, kann aber nicht upvote. Vielen Dank – ernst

-2

Sie müssen Ereignis-Listener verwenden. Versuchen:

$('body').on('keyup','#SearchField',function(){ 
//do the next 
});

Quelle

2016-03-30 03:51:33

Bedeutet das, der Button 'onclick =" Search() "' wird nicht benötigt ? Außerdem, in Ihrem Kommentar von '// Do next', das ist der Teil, wo ich in den Suchmethoden-Aufruf, den ich habe eingeben? – ernst

bekomme ich immer noch nicht obwohl ich den Event Listener benutzt habe. – ernst

Sie müssen Ereignis-Listener verwenden, nachdem Sie das erste Ereignis aufgerufen haben. Vielleicht musstest du den ganzen Code speichern, seit du eine Funktion mit Javascript eingibst Und rufst es in // do_something –

Suchfunktion kehrt nicht Ergebnis

Antwort

Verwandte Themen