6

से शुरू हो रहा है, मैं परिणाम दिखाने के लिए टाइपहेड v0.11.1 का उपयोग कर रहा हूं लेकिन यह परिणाम न दिखा रहा है जिसके परिणामस्वरूप परिणाम एक ही परिणाम से शुरू हो रहा है।बूटस्ट्रैप टाइपएडहेड सुझाव नहीं दिखा रहा है जिसमें वैल्यू एक ही मान

परिणाम मैं डेटाबेस से हो रही है यह है:

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 
} 


समस्या Typeahead छोड़कर
Sr. Android Developer और 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>') 
    } 
}); 
+0

भीतर filter में पारित मैं सिर्फ अपने कोड की नकल की और कुछ संशोधन किए गए (बजाय URL से प्राप्त करने में कठिनाई के स्थिर JSON उपयोग करने के लिए)। यह किसी भी समस्या के बिना काम किया। मैं "सीनियर XXX" प्रविष्टियों को देखने में सक्षम हो सकता था। एकमात्र सुधार जो मैंने किया है वह JSON ऑब्जेक्ट संरचना के साथ है। क्या आप जांच सकते हैं कि आप सर्वर से सभी वैध JSON प्रविष्टियां प्राप्त कर रहे हैं या नहीं? – CuriousMind

+0

तो, यूआरएल वास्तव में जेएसओएन लौट रहा है और मुझे ऊपर वर्णित सटीक JSON प्रविष्टियां मिल रही हैं। –

+0

क्या आप बस JSON प्रदर्शित करने वाले ब्राउज़र देव उपकरण का एक स्नैपशॉट जोड़ सकते हैं? – CuriousMind

उत्तर

3

ध्यान दें, के बारे में उम्मीद कुछ नहीं सभी परिणाम प्रदर्शित कर रहा है है

$("#PositionId").val(""); 
का परिणाम

? ; html प्रश्न पर प्रकट नहीं होता है; , बिना "आईडी" चयनकर्ता स्ट्रिंग के भीतर

$("#Position") 

तत्व पर प्रारंभ होना दिखाई देते हैं .typeahead()?


समस्या Typeahead लौटे obeject की Title संपत्ति का स्ट्रिंग मान भीतर अवधि चरित्र . के कारण सीनियर Android डेवलपर और सीनियर आईओएस डेवलपर को छोड़कर सभी परिणाम प्रदर्शित कर रहा है

दिखाई देते है । .typeahead क्वेरी के सटीक इनपुट मान से मेल खाता है। उदा,। अगर क्वेरी "sr" .typeahead "सीनियर" से मेल नहीं खाती ; अगर क्वेरी "एसआर" थी। .typeahead "सीनियर एंड्रॉइड डेवलपर", "सीनियर आईओएस डेवलपर" से मेल खाएगा। प्रारंभिक पर filter फ़ंक्शन के भीतर, templates के भीतर प्रदर्शित किए गए मैचों के लिए समायोजित परीक्षण प्रदर्शित किया जाएगा; हटाया गया अवधि चरित्र "।" परिणाम परीक्षण से पहले templates पर लौटे। यदि क्वेरी "sr" है, तो "सीनियर एंड्रॉइड डेवलपर", "सीनियर आईओएस डेवलपर" दोनों लौटाएं। यदि क्वेरी "sr ios" है, तो suggestion के रूप में प्रदर्शित करने के लिए "सीनियर आईओएस डेवलपर" को templates पर वापस लौटना चाहिए।

Bloodhound.tokenizers.obj.whitespace"value" पर सेटिंग बनाने का प्रयास करें; templatessuggestion पर Bloodhound पर कॉलबैक फ़ंक्शन को वापस करने के लिए ऑब्जेक्ट लौटा रहा है; templatessuggestion कॉलबैक समारोह में "सुझाव" html लौटने का उपयोग वस्तु 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 ; e.g., `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"` ; e.g., `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>

+0

उत्तर के लिए @ guest271314 धन्यवाद। यह वास्तव में मेरी मदद करता है। –

संबंधित मुद्दे