How to add auto-complete Sublime Text 3

I would like to add custom auto-complete key bindings much like built-in:

Example: html+tab auto-completes the Doctype Block.

I tried adding html custom key binding: type c + o + l + tab to generate <div class="col-">

Preferences > Key Bindings > Default (OSX).sublime-keymap -- User

{"keys": ["c+o+l+tab"], "command": "insert_snippet", "args": {"contents": "<div class=\"col-$0\">"}},
However, two issues:

the new key binding overrides all other auto completes
the initial col or characters remains in front of the generated tag. col<div class="col-">

What is the correct way to add this type of key binding?

Solution

The correct way to do something like this is to use either snippets or completions. Although there are some differences, generally speaking they both work the same way in the end, and which one you choose depends on how many such items you want to create and how complex you want them to be.

Using a snippet, you would select Tools > Developer > New Snippet... from the menu and fill out the snippet template, then save it as a sublime-snippet file in the location that Sublime defaults to (which is your User package).

For example, that might look like the following based on the example in your question:

<snippet>
    <content><![CDATA[
<div class="col-$0">
]]></content>
    <description>Insert DIV with column class</description>
    <tabTrigger>col</tabTrigger>
    <scope>text.html</scope>
</snippet>

Snippets are XML formatted, and everything between ![CDATA[ and ]] is inserted into the buffer (don't remove the CDATA even if you think you don't need it; Sublime will ignore the snippet if you do).

The tabTrigger specifies the text that you want to be the trigger for the snippet, the scope says what sort of files the snippet should trigger in, and the description will be displayed next to the snippet in the auto-completions panel.

In a snippet, the tabTrigger, scope and description are all optional. If you don't specify a tabTrigger you can only expand the snippet from the Command Palette or via the insert_snippet command (for example in a key binding). Without a scope the snippet applies everywhere, and without description it has no description in the panel.

If you have many such items that you want to add snippets for, you can also use completions instead. These are stored in JSON files with an extension of sublime-completions and should be saved in your User package (use Preferences > Browse Packages... if you don't know where that is.

An example of such a file would be:

{
    "scope": "text.html",

    "completions": [
        { "trigger": "col\tInsert DIV with column class", "contents": "<div class=\"col-$0\">" },
    ]
}

In this format, the trigger is always the text to trigger and the description (still optional) is separated from the trigger by a \t character in the trigger key.

In completions you only specify the scope once at the top instead of every time, but there are some functional differences between completions and snippets.

There can only be one snippet per sublime-snippet file, but a sublime-completions file can contain many completions in a single file; the completions key is an array so you can place more than one completion in the same file.
Completions are JSON, so contents that are multi line or contain JSON specific characters such as a " character are harder to enter; completions are better for shorter sequences while snippets are better for more complex things.
When autocomplete triggers, if there is a completion and a snippet that could be autocompleted, snipptets always "win" and are inserted, whereas completions cycle. That means that for example in this particular example you need to press Tab twice because col is also the name of a tag.
Snippets automatically appear in the command palette (when they apply) but completions do not. In the command palette, Snippets appear as commands like Snippet: Something, where Something is the description if it exists and the name of the file if it does not.

In either case, you can make the snippet/completion apply only in certain types of files by applying a scope; to determine the appropriate scope, position the cursor in a file at the appropriate place and select Tools > Developer > Show Scope Name...; the more of the displayed scope you use the more specific it becomes. Generally just the top level such as text.html is all that's needed unless you're doing something special.