typeahead:在最后匹配的字母后剪切的选定值

时间:2015-02-07 16:25:54

标签: jquery typeahead.js

typeahead的奇怪问题。

打字,例如" W"然后选择此值: enter image description here

产生这个:

enter image description here

当我在自动完成选择功能中执行此操作时:

select: function( event, ui ) {
    var professionName = ui.item.label;
    console.log(professionName);
}

奇怪 - 项目标签仅包含突出显示的字母的文字。

思想?

谢谢!

[编辑]

这是HTML& javascript,根据要求。 (Typeahead是版本0.12.2)

    <div class="span6 float_r">
        <div class="control-group">
            <label class="control-label" for="drpProfession">Profession/Occupation:</label>
            <div class="controls">
                <input type="text" id="drpProfession" name="drpProfession" value="<?=$professionCurrentLabel;?>" placeholder="Search for profession"><a href="#" class="small" onclick="javascript: $('#drpProfession').val('');; $('#drpProfessionID').val('');">clear</a>
                <input type="hidden" id="drpProfessionID" name="drpProfessionID" value="<?=$professionCurrentId;?>">
            </div>
        </div>
<script type="text/javascript">
    var professionLabelFieldID = 'drpProfession';
    var professionIdFieldID = 'drpProfessionID';
    var professionsValues = <?=$optionsProfessionValues?>;
    var professionsLabels = <?=$optionsProfessionLabels?>;
    prepProfessionAutocomplete(professionsValues, professionsLabels, professionLabelFieldID, professionIdFieldID);

function prepProfessionAutocomplete (professionsValues, professionsLabels, professionLabelFieldID, professionIdFieldID) {
    $(document).ready(function() {
        $('#'+professionLabelFieldID).autocomplete({
            delay: 0,
            autoFocus: true,
            source: professionsLabels,
            select: function( event, ui ) {
                var professionName = ui.item.label;
                var professionID = 0;
                var professionValueIndex = professionsLabels.indexOf(professionName);
                var professionDbID = professionsValues[professionValueIndex];
                if (professionName.length > 0 && professionDbID > 0) {
                    professionID = professionDbID;
                }
                $('#'+professionIdFieldID).val(professionID);
                console.log(professionName);
                return true;
            }
        }).keyup(function() {
            // Upper case values in case user is entering new ones
            this.value = ucwords(this.value);
        });
   });
   $('#'+professionLabelFieldID).change(function() {
      if ($('#'+professionLabelFieldID).val() == '') {
          // user "deleted" profession. Capture it
          $('#'+professionIdFieldID).val('');
      }
   });
}
</script>

1 个答案:

答案 0 :(得分:0)

一个简单的改变......

来自:

var professionName = ui.item.label;

到此:

var professionName = ui.item.value;

我开始使用bootstrap自动完成功能,其中“label”工作,但切换到typeahead,这必须打破它。现在全部设定!