Javascript Girl
  1. Javascript Girl
  3. Bootstrap Typeahead ne présentant pas de suggestion dont la valeurKey commence avec la même valeur
Intereting Posts
Passer une chaîne dans l'attribut de la fonction onclick de l'élément élément créé dynamiquement JQuery .load () / .ajax () n'exécute pas javascript dans le HTML renvoyé après l'ajout Kendo Grid utilisant le contrôle déroulant en ligne et l'éditeur personnalisé L'événement onchange ne déclenche pas lorsque la valeur est modifiée lors de l'événement onkeyup WebStorm ne reconnaît pas Mocha décrivez () et il () Comment ouvrir Outlook Calendar à partir d'un lien de messagerie ou d'un site Web? Obtenir "Erreur non détectée: l'assertion a échoué: Ember Views requiert jQuery entre 1.7 et 2.1" avec une application créée à l'aide de braquage JQuery change () sur <select> et firefox Comment augmenter la hauteur de la zone des étiquettes des axes x sur un diagramme highchart.js? Nul est un objet de type, donc c'est vrai? Que se passe-t-il dans les coulisses? Lorsque j'essaie de créer un objet Range dans ace.js, une erreur "Consommateur illégal" est lancée Obtenir de la couleur ANSI pour le caractère à l'index Ajouter Alpha Channel à la couleur d'arrière-plan à l'aide de jQuery / JavaScript Pourquoi puis-je avoir un tableau différent? Comment analyser html qui inclut le code javascript

Bootstrap Typeahead ne présentant pas de suggestion dont la valeurKey commence avec la même valeur

J'utilise typeahead v0.11.1 pour afficher le résultat, mais il ne montre pas le résultat qui a résulté en commençant par le même résultat.

Le résultat que je reçois de la base de données est le suivant: 

Object { Id: 4, Title: "project manager", Description: "project manager", CompanyId: 1 } Object { Id: 6, Title: "Software Developer", Description: "Software Developer", CompanyId: 1 } Object { Id: 7, Title: ".NET Developer", Description: ".NET Developer", CompanyId: 1 } Object { Id: 10, Title: "Android Developer", Description: "Android Developer", CompanyId: 1 } Object { Id: 11, Title: "iOS Developer", Description: "iOS Developer", CompanyId: 1 } Object { Id: 13, Title: "Sr. Android Developer", Description: "Sr. Android Developer", CompanyId: 1 } Object { Id: 14, Title: "Sr. iOS Developer", Description: "Sr. iOS Developer", CompanyId: 1 }

Le problème est typeahead affichant tous les résultats sauf
Sr. Android Developer et Sr. iOS Developer 

 var position = new Bloodhound({ datumTokenizer: function (datum) { return Bloodhound.tokenizers.whitespace(datum.Title); }, queryTokenizer: Bloodhound.tokenizers.whitespace, //prefetch: '../data/films/post_1960.json', remote: { url: '/Search/Positions?query=%QUERY', wildcard: '%QUERY', filter:function (positionList) { // Map the remote source JSON array to a JavaScript object array return $.map(positionList, function (position) { console.log("position is:", position); return { Title: position.Title }; }); } } }); var promisepos=position.initialize(); promisepos.done(function(){}); $('#Position').typeahead({ minLength:1, highlight:true, hint:false },{ name: 'positionList', displayKey:'Title', source:position.ttAdapter(), templates:{ footer: "<div class='position-wrapper'><a class='ad-ps'><i class='fa fa-user-secret'></i> Add New Position</a></div>", notFound: function(){ var ps=$('#Position').val(); $('#PositionId').val(""); return "<div class='position-wrapper'><p>No Position found.</p><a class='ad-ps'><i class='fa fa-user-secret'></i> Add New Position</a></div>"; }, suggestion: Handlebars.compile('<div class="position-wrapper">'+ '<div class="poosition-info-wrapper">'+ '<span>{{Title}}</span>'+ '</div>'+ '</div>') } });

    Note: pas certain du résultat attendu de 

     $("#PositionId").val("");

    ? ; html n'apparaissent pas à la Question; .typeahead() semble être initialisé à 

     $("#Position")

    Élément, sans "Id" dans la chaîne de sélection?

    Le problème est typeahead affiche tous les résultats, à l'exception de Senior Developer et Senior iOS Developer

    Apparaissent en raison du caractère de la période . Dans la valeur de chaîne de la propriété Title de obeject renvoyé. .typeahead semblent correspondre à la valeur de saisie exacte de la requête. par exemple,; Si la requête était "sr" .typeahead ne correspondait pas "Sr." ; Si la requête était "sr". .typeahead associerait "Sr. Developer Android", "Senior iOS Developer". Test ajusté pour les correspondances renvoyées qui seraient affichées dans les templates , dans la fonction de filter à l'initialisation Bloodhound ; Caractère de période supprimé "." Du test de correspondance avant que les résultats ne soient retournés aux templates . Si la requête est "sr", elle doit renvoyer les deux "Senior Developer Android", "Senior iOS Developer". Si la requête est "sr ios", renvoyez "Senior iOS Developer" aux templates pour l'affichage comme suggestion .

    Essayez de créer le paramètre Bloodhound.tokenizers.obj.whitespace sur "value" ; Retour d'objet à la fonction de rappel de suggestion templates dans le filter à l'initialisation Bloodhound ; Retourner "suggestion" html à la fonction de rappel de suggestion templates , en utilisant l'objet passé au filter dans l'initialisation Bloodhound 

     $(function() { var search = $(".typeahead-container #Position.typeahead"); // `positions` settings var positions = new Bloodhound({ // set `Bloodhound.tokenizers.obj.whitespace` to `"value"` datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"), queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: "https://gist.githubusercontent.com/anonymous/" + "cd07af7c8e3dbbeb601f/raw/" + "936a69aa84e48c2cf96682ff044d3ace87750457/data.json" + "?query=%QUERY", wildcard: "%QUERY", filter: function (pos) { return $.map(pos, function(positions) { // return `value` set to `positions`:`data` `Title`, // return `suggest` property having value set to `positions` object, // utilized at `suggestion` callback // remove periof character "." from match test return new RegExp( search.val() + "|" + search.val().replace(".", "") , "i") .test(positions.Title.replace(".", "")) ? { value: positions.Title, suggest: positions } : null }) } } /* // run with "local" data source ; eg, `data` local: $.map(data, function(positions) { return { value: positions.Tile, suggest: positions } }) */ }); var promisepos = positions.initialize(); promisepos .done(function() { console.log("positions initialized"); }) .fail(function() { console.log("positions initialization error"); }); search.typeahead({ minLength: 1, highlight: true, hint: false }, { name: "positionList", displayKey: "Title", templates: { // set `templates` `footer` `html` footer: "<div class=position-wrapper>" + "<a class=ad-ps><i class=fa fa-user-secret></i>" + " Add New Position</a></div>", // set `templates` `notFound` `html` notFound: function() { // not certain expected result of calling `.val()` // on `#Position` ?, without argument passed to `.val()` ? var ps = $('#Position').val(); // not certain expected result of setting // `#PositionId` `.val()` to empty string ? $("#PositionId").val(""); return "<div class=position-wrapper>" + "<p>No Position found.</p>" + "<a class=ad-ps>" + "<i class=fa fa-user-secret></i>" + " Add New Position" + "</a></div>"; }, // set `templates` `suggestion` `html` suggestion: function(data) { // `data`: `positions` object passed at // `Bloodhound` `remote` `local` var details = "<div class=resultContainer>" + "Title: " + "<b style=color:blue>" + data.suggest.Title + "</b>" + "<div class=resultDesc>" + "Description: <b>" + data.suggest.Description + "</b>" + "</div>" + "<div class=resultLabel>Id: " + "<b>" + data.suggest.Id + "</b><br />" + "Company Id: " + "<b>" + data.suggest.CompanyId + "</b>" + "</div></div>"; return details } }, source: positions.ttAdapter() }); }); /* // run with `local` data source // `data`: `"data.json"` ; eg, `data` at `local` var data = [ { "Id": 4, "Title": "project manager", "Description": "project manager", "CompanyId": 1 }, { "Id": 6, "Title": "Software Developer", "Description": "Software Developer", "CompanyId": 1 }, { "Id": 7, "Title": ".NET Developer", "Description": ".NET Developer", "CompanyId": 1 }, { "Id": 10, "Title": "Android Developer", "Description": "Android Developer", "CompanyId": 1 }, { "Id": 11, "Title": "iOS Developer", "Description": "iOS Developer", "CompanyId": 1 }, { "Id": 13, "Title": "Sr. Android Developer", "Description": "Sr. Android Developer", "CompanyId": 1 }, { "Id": 14, "Title": "Sr. iOS Developer", "Description": "Sr. iOS Developer", "CompanyId": 1 } ]; */ 
     .typeahead-container { font-family: sans-serif; position: relative; margin: 100px; } .typeahead, .tt-query, .tt-hint { border: 2px solid #CCCCCC; border-radius: 8px; font-size: 24px; height: 30px; line-height: 30px; outline: medium none; padding: 8px 12px; width: 396px; } .typeahead { background-color: #FFFFFF; } .typeahead:focus { border: 2px solid #0097CF; } .tt-query { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; } .tt-hint { color: #999999; } .tt-dropdown-menu { background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); margin-top: 12px; padding: 8px 0; width: 422px; } .tt-suggestion { font-size: 24px; line-height: 24px; padding: 3px 20px; } .tt-suggestion.tt-is-under-cursor { background-color: #0097CF; color: #FFFFFF; } .tt-suggestion p { margin: 0; } .resultContainer { width: 410px; border: 1px dotted grey; border-radius: 10px; padding: 4px; margin: 4px; } .resultDesc, .resultLabel { font-size: 14px; font-style: italic; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"> </script> <input type="text" id="PositionId" /> <div class="typeahead-container"> <input type="text" id="Position" class="typeahead tt-query" placeholder="positions" /> </div>